/* ===================================================================================== * WeldGrid Cloud — wg-tokens.css * WP-01 (SEQUENTIAL GATE). Η ΜΟΝΑΔΙΚΗ πηγή αλήθειας για χρώμα, πυκνότητα, σκιές, * radius, focus rings, z-index, scrollbars και κίνηση. * * ΚΑΝΟΝΑΣ ΓΙΑ ΚΑΘΕ ΕΠΟΜΕΝΟ WORK PACKAGE * ------------------------------------- * • ΑΠΑΓΟΡΕΥΕΤΑΙ hex literal / rgba() literal σε οποιοδήποτε άλλο css/wg-*.css. * Ό,τι χρειάζεται χρώμα, το ζητάει με var(--wg-*) από εδώ. * • ΑΠΑΓΟΡΕΥΕΤΑΙ zoom, transform: scale() και αρνητικά margins για πυκνότητα. * Η πυκνότητα ρυθμίζεται ΜΟΝΟ από τα density tokens αυτού του αρχείου. * • ΑΝΩΤΑΤΟ radius 8px ΠΑΝΤΟΥ. Δεν υπάρχει pill token — ούτε 999px, ούτε 22px popup * radius, ούτε 14px toast radius της Rolamin. Το WeldGrid chrome είναι τετράγωνο. * • Πορτοκαλί ΜΟΝΟ για primary action / active state. ΠΟΤΕ διακοσμητικά. * • Focus ring: NAVY (--wg-focus-ring) σε ΟΛΑ τα πεδία. Το πορτοκαλί --wg-focus * επιτρέπεται ΜΟΝΟ σε primary action buttons. * * ΣΕΙΡΑ ΦΟΡΤΩΣΗΣ (home.php) * ------------------------- * libraries/*.css -> style-dashboard.css (legacy 743KB, ΠΡΟΣΤΑΤΕΥΜΕΝΟ) -> * color_palette.css -> **wg-tokens.css** -> wg-shell -> wg-forms -> wg-tables -> * wg-modals -> wg-toasts -> weldgrid-ui.css (overrides layer, τελευταίο) * * ΓΙΑΤΙ Ο ΕΠΙΛΟΓΕΑΣ ΕΙΝΑΙ `:root, :root:root, body.weldgrid-shell, html body.weldgrid-shell` * --------------------------------------------------------------------------------------- * Το αρχείο φορτώνεται ΠΡΙΝ τα wg-*.css, όμως δύο αρχεία που φορτώνονται ΜΕΤΑ * ξαναδηλώνουν tokens στο ίδιο επίπεδο: * - css/style-dashboard.css:2-17 (legacy: --wg-navy/--wg-blue/--wg-cyan/--wg-bg/ * --wg-sidebar-width 250px/--wg-topbar-height 58px) -> φορτώνεται ΠΡΙΝ, χάνει ούτως ή άλλως * - css/wg-shell.css:5-29 (canonical WeldGrid set, carry-over του WP-00) * - css/wg-shell.css:513-545 (ΠΡΟΣΟΧΗ: μπλοκ με ROLAMIN ΤΙΜΕΣ — #0b3a8a blue, * #d8e1f0 border, #f4f7fb bg, #ff6b1a orange, radius 8px, field-height 2.5rem) * - css/wg-shell.css:547-549 (body.weldgrid-shell { --wg-topbar-height: 60px }) * - css/wg-shell.css:1181-1189 (@media 1366 { :root { density } }) * Επειδή φορτώνονται αργότερα, ένα σκέτο `:root` εδώ θα έχανε. Η ανύψωση specificity * (`:root:root` = 0,2,0 > `:root` = 0,1,0 και `html body.weldgrid-shell` = 0,1,2 > * `body.weldgrid-shell` = 0,1,1) κάνει αυτό το αρχείο να κερδίζει ΧΩΡΙΣ ΚΑΝΕΝΑ !important. * Επειδή οι επιλογείς πιάνουν ΜΟΝΟ html/body, κάθε component μπορεί κανονικά να ορίσει * δικό του token πάνω στον εαυτό του (π.χ. .wg-toast--success { --wg-toast-accent: ... }). * * >>> TODO WP-08: διέγραψε τα μπλοκ wg-shell.css:513-545, 547-549 και τα token * declarations του 1181-1189. Είναι νεκρός κώδικας μετά το WP-01 και είναι * ακριβώς η παγίδα «Rolamin τιμές με WeldGrid ονόματα». * * ===================================================================================== * ΠΙΝΑΚΑΣ ΜΕΤΑΦΟΡΑΣ ROLAMIN -> WELDGRID (00_PLAN.json / palette_mapping) * ΚΑΘΕ γραμμή CSS που έρχεται από Rolamin μεταφέρεται BY VALUE μέσω αυτού του πίνακα. * ΠΟΤΕ by name: το Rolamin ορίζει ΔΙΚΑ ΤΟΥ --wg-navy/--wg-blue/--wg-orange * (style-dashboard.css:6017-6022) με ΤΕΛΕΙΩΣ ΔΙΑΦΟΡΕΤΙΚΕΣ τιμές. * ------------------------------------------------------------------------------------- * ROLAMIN -> WELDGRID ΣΗΜΕΙΩΣΗ * ------------------------------------------------------------------------------------- * --rolamin-navy #071F42 -> --wg-navy-950 #071f36 sidebar/topbar/modal header ground * --rolamin-navy-dark #041C39 -> --wg-navy-975 #04162a ΝΕΟ. press/active depth * --rolamin-blue #0B3A8A -> --wg-navy-900 #0a2b49 ΚΡΙΣΙΜΟΤΕΡΟ. Το «blue» της Rolamin * ΕΙΝΑΙ το κύριο interactive navy * (focus borders, checked checkbox, * select2 focus). ΔΕΝ είναι το * --wg-blue/--wg-info teal. * --rolamin-blue-dark #06265D -> --wg-navy-950 #071f36 selected text σε modal dropdowns * --rolamin-blue-soft #EAF1FF -> --wg-steel-100 #e9f0f4 soft tint (summernote toolbar, * select2 highlighted, skeleton base) * --rolamin-orange #FF6B1A -> --wg-orange #ff681d 1:1. primary action / active ΜΟΝΟ * --rolamin-orange-dark #DC520F -> --wg-orange-dark #d94b08 1:1. hover/press primary * --rolamin-orange-soft #FFF1E8 -> --wg-orange-soft #fff1e8 ΝΕΟ. select2 highlighted option, * flatpickr inRange, checkbox hover * --rolamin-text #243247 -> --wg-text #102a43 κύριο κείμενο * --rolamin-muted #667085 -> --wg-text-muted #60758a placeholders/help/secondary * --rolamin-border #D8E1F0 -> --wg-border #cbd9e3 όλα τα field/card/table borders * --rolamin-bg #F4F7FB -> --wg-surface-muted #edf3f6 page ground κάτω από τις κάρτες * --rolamin-white #FFFFFF -> --wg-surface #ffffff κάρτες/modal/fields * --rolamin-primary-soft #EAF2F8 -> --wg-surface-soft #f5f8fa skeleton base + zebra rows * radius .625rem / popup 22px / toast 14px -> --wg-radius 7px + --wg-radius-sm 5px * ΣΚΟΠΙΜΗ ΑΠΟΚΛΙΣΗ. Max 8px παντού. * field-height 2.5rem -> --wg-field-height 2.25rem πιο συμπαγές για 14" * modal padding clamp(.65,1.2vw,1rem) -> --wg-modal-padding clamp(.55rem,1.1vw,.9rem) * topbar 60px -> --wg-topbar-height 3.5rem (56px) — +4px κατακόρυφα στα 768 * sidebar width / collapsed -> --wg-sidebar-width 14.5rem (232px) / * --wg-sidebar-collapsed-width 3.875rem (62px) * focus ring rgba(11,58,138,.12/.16) -> --wg-focus-ring rgba(10,43,73,.16) NAVY για ΟΛΑ τα πεδία. * Το --wg-focus (πορτοκαλί) ΜΟΝΟ σε primary buttons. * shadow 0 2px 7px rgba(7,31,66,.04) -> --wg-shadow-sm 0 2px 8px rgba(7,31,54,.08) * shadow 0 18px 42px / 0 22px 55px -> --wg-shadow-md 0 16px 40px rgba(7,31,54,.18) ΜΙΑ τιμή * danger #B42318 / icon bg #FEF3F2 -> --wg-red #ba2b2b / --wg-red-soft #fdf0f0 * toast success = μπλε (BRAND rule) -> --wg-green #20875f + --wg-green-soft * ΣΚΟΠΙΜΗ ΑΠΟΚΛΙΣΗ — ΜΗΝ «ΔΙΟΡΘΩΘΕΙ». Κρατάμε semantics. * toast info = μπλε -> --wg-info #1478a8 + --wg-info-soft #e8f2f7 * ΜΟΝΟ info/neutral accent — ΠΟΤΕ primary interactive. * toast warning = πορτοκαλί -> --wg-amber #a66608 + --wg-amber-soft * Το WeldGrid ξεχωρίζει warning (amber) από action (orange). * z 20040/20050/20060/20090 -> --wg-z-swal 30040 / --wg-z-toast 30090 / * --wg-z-dock 30095 / --wg-z-nested-help 30120 * (ίδια ΣΧΕΤΙΚΗ σειρά, ενιαία σκάλα 30xxx) * .rolamin-* / body.rolamin-shell -> .wg-* / body.weldgrid-shell * ===================================================================================== */ /* ───────────────────────────────────────────────────────────────────────────────────── 1. CANONICAL TOKENS ───────────────────────────────────────────────────────────────────────────────────── */ :root, :root:root, body.weldgrid-shell, html body.weldgrid-shell { /* ── 1.1 NAVY SCALE — chrome, sidebar, topbar, modal headers, interactive borders ── */ --wg-navy-975: #04162a; /* press / active depth (Rolamin --rolamin-navy-dark) */ --wg-navy-950: #071f36; /* sidebar & topbar & modal-header ground */ --wg-navy-900: #0a2b49; /* ΚΥΡΙΟ INTERACTIVE NAVY: focus border, checked box, select2 focus */ --wg-navy-800: #123f61; /* secondary chrome, hovered nav */ /* ── 1.2 STEEL SCALE — δομή, borders, tints. Καθόλου «χρώμα», μόνο ένταση. ── */ --wg-steel: #1976a2; /* brand steel accent (WeldGrid steel) — links/eyebrows, ΟΧΙ primary */ --wg-steel-700: #315c78; --wg-steel-500: #6f8ca0; /* icons, disabled text, scrollbar thumb σε ήσυχες επιφάνειες */ --wg-steel-300: #b9cad6; --wg-steel-200: #d3dfe7; --wg-steel-100: #e9f0f4; /* soft tint: summernote toolbar, select2 highlight, skeleton base */ /* ── 1.3 SURFACES — λευκές κάρτες πάνω σε ήρεμο steel ground ── */ --wg-surface: #ffffff; --wg-surface-soft: #f5f8fa; /* zebra rows, skeleton base */ --wg-surface-muted: #edf3f6; /* page ground κάτω από τις κάρτες */ /* ── 1.4 TEXT ── */ --wg-text: #102a43; --wg-text-muted: #60758a; --wg-text-inverse: #ffffff; /* ── 1.5 ARC ORANGE — primary action / active state ΚΑΙ ΤΙΠΟΤΑ ΑΛΛΟ ── */ --wg-orange: #ff681d; --wg-orange-dark: #d94b08; --wg-orange-soft: #fff1e8; /* ── 1.6 SEMANTIC + soft variants (badges, alerts, toasts, cell states) ── */ --wg-green: #20875f; --wg-green-soft: #eaf5f0; --wg-amber: #a66608; --wg-amber-soft: #fdf4e6; --wg-red: #ba2b2b; --wg-red-soft: #fdf0f0; --wg-info: #1478a8; --wg-info-soft: #e8f2f7; /* --wg-blue / --wg-blue-soft: ΜΕΤΑΒΑΤΙΚΑ ALIASES — βλ. §1.7 */ --wg-blue: var(--wg-navy-900); --wg-blue-soft: var(--wg-info-soft); /* ── 1.8 BORDERS ── */ --wg-border: #cbd9e3; /* όλα τα field/card/table borders */ --wg-border-strong: #b3c6d4; /* table gridlines, διαχωριστικά μέσα σε κάρτα */ --wg-border-inverse: rgba(255, 255, 255, 0.12); /* borders πάνω σε navy chrome */ /* ── 1.9 SHADOWS — δύο τιμές, τίποτα άλλο ── */ --wg-shadow-sm: 0 2px 8px rgba(7, 31, 54, 0.08); /* κάρτες, fields, checkbox */ --wg-shadow-md: 0 16px 40px rgba(7, 31, 54, 0.18); /* dropdowns, modals, calendar */ /* ── 1.10 FOCUS RINGS ── NAVY για ΟΛΑ τα πεδία. Πορτοκαλί ΜΟΝΟ σε primary action buttons. */ --wg-focus-ring: rgba(10, 43, 73, 0.16); --wg-focus-ring-strong: rgba(10, 43, 73, 0.24); --wg-focus-ring-danger: rgba(186, 43, 43, 0.18); --wg-focus: rgba(255, 104, 29, 0.24); /* PRIMARY BUTTONS ONLY */ --wg-focus-width: 3px; /* ── 1.11 RADIUS — ΑΝΩΤΑΤΟ 8px. Δεν υπάρχει pill. ── */ --wg-radius: 7px; --wg-radius-sm: 5px; /* ── 1.12 DENSITY — προτεραιότητα: laptop 14" @ 1366x768 και 1440x900 ── Όλες οι τιμές σε rem/clamp(). Καμία τιμή δεν εξαρτάται από zoom ή scale. */ --wg-page-gap: clamp(0.5rem, 0.9vw, 0.75rem); /* απόσταση blocks μέσα στο page shell */ --wg-section-gap: clamp(0.5rem, 0.8vw, 0.7rem); /* απόσταση section -> section */ --wg-kpi-table-gap: clamp(0.45rem, 0.7vw, 0.65rem); /* KPI row -> πίνακας */ --wg-card-padding: clamp(0.65rem, 0.9vw, 0.875rem); --wg-card-padding-compact: clamp(0.5rem, 0.7vw, 0.65rem); --wg-toolbar-gap: 0.45rem; --wg-field-height: 2.25rem; /* ΕΝΙΑΙΟ ύψος κάθε control */ --wg-select2-height: var(--wg-field-height); /* ενοποίηση των δύο height systems */ --wg-table-cell-y: 0.45rem; --wg-table-cell-x: 0.65rem; --wg-modal-padding: clamp(0.55rem, 1.1vw, 0.9rem); --wg-topbar-height: 3.5rem; /* 56px */ --wg-footer-height: 2.625rem; /* 42px */ --wg-sidebar-width: 14.5rem; /* 232px */ --wg-sidebar-collapsed-width: 3.875rem; /* 62px */ /* ── 1.13 TYPOGRAPHY — μία οικογένεια, industrial, χωρίς decorative fonts ── Η οικογένεια ξεκινά με Arial (ό,τι χρησιμοποιείται ήδη) ώστε να ΜΗΝ αλλάξουν μετρικές κειμένου σε PDF annotations / Live Excel. */ --wg-font-family: Arial, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, sans-serif; --wg-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --wg-font-size: 0.875rem; /* βασικό */ --wg-font-size-sm: 0.8rem; --wg-font-size-xs: 0.72rem; /* badges, eyebrows, helper text */ --wg-font-size-table: 0.82rem; /* table cells */ --wg-font-size-title: 1rem; /* modal title (700) */ --wg-font-size-page-title: clamp(1.05rem, 1.3vw, 1.25rem); --wg-line-height: 1.42; --wg-weight-regular: 400; /* κείμενο πεδίου - ό,τι πληκτρολογεί ο χρήστης */ --wg-weight-medium: 600; --wg-weight-bold: 700; /* ── 1.14 Z-INDEX SCALE — ΜΙΑ σκάλα, ελέγξιμη. Διατηρεί τη σχετική σειρά Rolamin. ── */ --wg-z-base: 1; --wg-z-sticky: 20; /* sticky table header / sticky actions column */ --wg-z-topbar: 1030; --wg-z-sidebar: 1040; --wg-z-dropdown: 1055; /* Πάνελ αγκυρωμένο στην μπάρα κορυφής (ειδοποιήσεις, μενού χρήστη): ΠΑΝΩ * από τα dropdown της σελίδας - είναι επικάλυψη του chrome, όχι περιεχόμενο. */ --wg-z-topbar-panel: 1060; --wg-z-fullscreen: 29000; /* fullscreen table surface */ --wg-z-modal: 30000; /* bootstrap/custom modals */ --wg-z-swal: 30040; /* .swal2-container */ --wg-z-toast: 30090; --wg-z-dock: 30095; /* minimized-modal dock (WP-02) */ --wg-z-select2: 30100; /* select2/flatpickr dropdown ΜΕΣΑ σε swal */ --wg-z-nested-help: 30120; --wg-z-tooltip: 30140; /* ── 1.15 MOTION ── */ --wg-transition-fast: 110ms ease; --wg-transition: 160ms ease; /* ── 1.16 SCROLLBARS ── */ --wg-scrollbar-size: 0.5rem; --wg-scrollbar-track: var(--wg-steel-100); --wg-scrollbar-thumb: var(--wg-navy-900); --wg-scrollbar-thumb-hover: var(--wg-navy-950); --wg-scrollbar-track-inverse: rgba(255, 255, 255, 0.08); --wg-scrollbar-thumb-inverse: rgba(255, 255, 255, 0.42); --wg-scrollbar-thumb-inverse-hover: rgba(255, 255, 255, 0.62); /* ── 1.17 LEGACY ALIASES ── Το css/style-dashboard.css (ΠΡΟΣΤΑΤΕΥΜΕΝΟ, δεν τροποποιείται) καταναλώνει αυτά τα ονόματα. Τα ξαναδίνουμε BY VALUE ώστε το legacy chrome να πέφτει στη WeldGrid παλέτα αντί για τις Rolamin τιμές που είχε αφήσει το wg-shell.css:543-544. */ --wg-navy: var(--wg-navy-950); /* legacy: 84 call sites */ --wg-cyan: var(--wg-steel); /* legacy: 15 call sites, ίδια τιμή #1976a2 */ --wg-bg: var(--wg-surface-muted); /* legacy: 2 call sites */ /* ── 1.18 BOOTSTRAP DE-NOISING ── Μηδενισμός των default Bootstrap χρωμάτων στη ρίζα, ώστε να μην ξεφύγει ΠΟΤΕ default μπλε/πράσινο σε .bg-*, .text-*, .badge, .border-*, links, focus rings. Γεωμετρία/τυπογραφία του Bootstrap ΔΕΝ πειράζεται εδώ. */ --bs-primary: #ff681d; --bs-primary-rgb: 255, 104, 29; --bs-secondary: #315c78; --bs-secondary-rgb: 49, 92, 120; --bs-success: #20875f; --bs-success-rgb: 32, 135, 95; --bs-danger: #ba2b2b; --bs-danger-rgb: 186, 43, 43; --bs-warning: #a66608; --bs-warning-rgb: 166, 102, 8; --bs-info: #1478a8; --bs-info-rgb: 20, 120, 168; --bs-light: #edf3f6; --bs-light-rgb: 237, 243, 246; --bs-dark: #071f36; --bs-dark-rgb: 7, 31, 54; --bs-body-color: #102a43; --bs-body-color-rgb: 16, 42, 67; --bs-emphasis-color: #0a2b49; --bs-border-color: #cbd9e3; --bs-border-color-translucent: rgba(10, 43, 73, 0.14); --bs-link-color: #0a2b49; --bs-link-color-rgb: 10, 43, 73; --bs-link-hover-color: #04162a; --bs-link-hover-color-rgb: 4, 22, 42; --bs-focus-ring-color: rgba(10, 43, 73, 0.16); --bs-focus-ring-width: 3px; --bs-highlight-bg: #fff1e8; } /* §1.7 — ΜΕΤΑΒΑΤΙΚΟ ALIAS, ΤΕΚΜΗΡΙΩΣΗ * ----------------------------------- * Το WP-00 μετέφερε αυτούσιους κανόνες που είχαν προέλθει από Rolamin και λένε * `var(--wg-blue)` εκεί που η Rolamin έλεγε `var(--rolamin-blue)`. Σύμφωνα με τον πίνακα, * --rolamin-blue -> --wg-navy-900 (interactive navy). Σήμερα υπάρχουν: * 25 call sites σε css/wg-{forms,tables,modals,shell,toasts}.css * (input:focus border, select2 focus/open border, select2 highlighted background, * dt-toolbar hover border, toast base accent) -> ΟΛΑ σημαίνουν interactive navy * 21 call sites στο legacy css/style-dashboard.css -> εκεί --wg-blue ήταν #0b2a4a navy * Αν το --wg-blue γινόταν #1478a8 (η τιμή του info accent), και τα 46 σημεία θα γύριζαν * ΣΙΩΠΗΛΑ σε teal — ακριβώς η παγίδα που περιγράφει το plan. Γι' αυτό: * --wg-info = #1478a8 <- Η ΚΑΝΟΝΙΚΗ ονομασία του info accent. Χρησιμοποιήστε ΑΥΤΟ. * --wg-blue = var(--wg-navy-900) <- deprecated alias, κρατά τα 46 σημεία σωστά * >>> TODO WP-02/04/05/08: κάθε var(--wg-blue) -> var(--wg-navy-900) (interactive) * ή var(--wg-info) (info toast/badge). WP-22: διαγραφή του alias. */ /* ───────────────────────────────────────────────────────────────────────────────────── 2. ΤΥΠΟΓΡΑΦΙΚΗ ΒΑΣΗ Δεν αγγίζουμε το font-size της ρίζας (html): εκατοντάδες rem τιμές — μεταξύ τους και οι PDF annotation κλίμακες — είναι δεμένες στα 16px. Ρυθμίζουμε μόνο το inherited μέγεθος του κελύφους. ───────────────────────────────────────────────────────────────────────────────────── */ html body.weldgrid-shell { font-size: var(--wg-font-size); line-height: var(--wg-line-height); } /* ───────────────────────────────────────────────────────────────────────────────────── 3. RESPONSIVE DENSITY — ρητά breakpoints Στόχος QA #1: 1366x768. Στόχος #2: 1440x900. Στα 1366: sidebar 232 + page padding 2x8 + card padding 2x10 => ~1098px για πίνακα, χωρίς οριζόντιο scroll της σελίδας (οι πίνακες παίρνουν δικό τους overflow container). Στα 768 ύψος: topbar 56 + footer 42 + gaps ~32 + card padding ~20 => ~618px περιεχόμενο. ───────────────────────────────────────────────────────────────────────────────────── */ /* 3.1 Άνετες οθόνες (>=1600) — λίγο περισσότερος αέρας, ποτέ πάνω από το clamp max. */ @media (min-width: 1600px) { :root:root, html body.weldgrid-shell { --wg-page-gap: 0.75rem; --wg-section-gap: 0.7rem; --wg-card-padding: 0.875rem; } } /* 3.2 1440x900 — δεύτερος στόχος QA. */ @media (max-width: 1440px) { :root:root, html body.weldgrid-shell { --wg-page-gap: 0.6rem; --wg-section-gap: 0.55rem; --wg-kpi-table-gap: 0.5rem; --wg-card-padding: 0.75rem; --wg-card-padding-compact: 0.55rem; --wg-table-cell-y: 0.42rem; --wg-table-cell-x: 0.6rem; } } /* 3.3 1366x768 — ΠΡΩΤΕΥΩΝ στόχος QA (laptop 14"). */ @media (max-width: 1366px) { :root:root, html body.weldgrid-shell { --wg-page-gap: 0.5rem; --wg-section-gap: 0.5rem; --wg-kpi-table-gap: 0.45rem; --wg-card-padding: 0.65rem; --wg-card-padding-compact: 0.5rem; --wg-toolbar-gap: 0.4rem; --wg-field-height: 2.125rem; /* 34px */ --wg-table-cell-y: 0.38rem; --wg-table-cell-x: 0.55rem; --wg-modal-padding: clamp(0.45rem, 1vw, 0.75rem); --wg-topbar-height: 3.25rem; /* 52px */ --wg-font-size-table: 0.8rem; } } /* 3.4 Πίεση ΥΨΟΥΣ (1366x768, 1280x720, docked παράθυρα). Ανεξάρτητο από το πλάτος: κόβει κατακόρυφο χώρο, όχι οριζόντιο. */ @media (max-height: 800px) { :root:root, html body.weldgrid-shell { --wg-topbar-height: 3.25rem; --wg-footer-height: 2.375rem; /* 38px */ --wg-page-gap: 0.45rem; --wg-section-gap: 0.45rem; --wg-kpi-table-gap: 0.4rem; --wg-table-cell-y: 0.35rem; --wg-field-height: 2.125rem; } } /* 3.5 Μικρά laptop / tablet landscape. */ @media (max-width: 1200px) { :root:root, html body.weldgrid-shell { --wg-sidebar-width: 13.25rem; /* 212px */ --wg-card-padding: 0.6rem; } } /* 3.6 Off-canvas sidebar territory (το layout το χειρίζεται το WP-08). */ @media (max-width: 991.98px) { :root:root, html body.weldgrid-shell { --wg-page-gap: 0.5rem; --wg-card-padding: 0.65rem; --wg-field-height: 2.25rem; /* touch: πίσω σε 36px */ --wg-table-cell-y: 0.45rem; --wg-topbar-height: 3.25rem; } } /* 3.7 Κινητό. */ @media (max-width: 767.98px) { :root:root, html body.weldgrid-shell { --wg-page-gap: 0.5rem; --wg-section-gap: 0.5rem; --wg-card-padding: 0.65rem; --wg-modal-padding: 0.4rem; --wg-font-size-table: 0.82rem; } } /* ───────────────────────────────────────────────────────────────────────────────────── 4. BOOTSTRAP COMPONENT DE-NOISING Τα .btn-* και .alert-* του Bootstrap 5 δεν διαβάζουν τα --bs-primary κ.λπ., αλλά γράφουν δικά τους --bs-btn-* / --bs-alert-* μέσα στην κλάση. Τα ξαναγράφουμε εδώ. Specificity: `body.weldgrid-shell .btn-primary` (0,2,1) > `.btn-primary` (0,1,0) -> κερδίζει ΧΩΡΙΣ !important, ό,τι σειρά κι αν έχει το bootstrap stylesheet. ───────────────────────────────────────────────────────────────────────────────────── */ /* 4.1 Κοινή γεωμετρία κουμπιών: τετράγωνο, συμπαγές, ίδιο ύψος με τα πεδία. */ body.weldgrid-shell .btn { --bs-btn-border-radius: var(--wg-radius); --bs-btn-font-size: var(--wg-font-size-sm); --bs-btn-focus-box-shadow: 0 0 0 var(--wg-focus-width) var(--wg-focus-ring); } /* 4.2 PRIMARY = arc orange. Το ΜΟΝΟ σημείο όπου το πορτοκαλί γεμίζει επιφάνεια, και το ΜΟΝΟ σημείο με πορτοκαλί focus ring. */ body.weldgrid-shell .btn-primary { --bs-btn-color: var(--wg-text-inverse); --bs-btn-bg: var(--wg-orange); --bs-btn-border-color: var(--wg-orange); --bs-btn-hover-color: var(--wg-text-inverse); --bs-btn-hover-bg: var(--wg-orange-dark); --bs-btn-hover-border-color: var(--wg-orange-dark); --bs-btn-active-color: var(--wg-text-inverse); --bs-btn-active-bg: var(--wg-orange-dark); --bs-btn-active-border-color: var(--wg-orange-dark); --bs-btn-active-shadow: none; --bs-btn-disabled-color: var(--wg-text-inverse); --bs-btn-disabled-bg: var(--wg-steel-300); --bs-btn-disabled-border-color: var(--wg-steel-300); --bs-btn-focus-box-shadow: 0 0 0 var(--wg-focus-width) var(--wg-focus); } /* 4.3 SECONDARY = λευκό με navy border. Ο default «άκυρο/δευτερεύον». */ body.weldgrid-shell .btn-secondary, body.weldgrid-shell .btn-light { --bs-btn-color: var(--wg-navy-900); --bs-btn-bg: var(--wg-surface); --bs-btn-border-color: var(--wg-border); --bs-btn-hover-color: var(--wg-navy-950); --bs-btn-hover-bg: var(--wg-surface-soft); --bs-btn-hover-border-color: var(--wg-navy-900); --bs-btn-active-color: var(--wg-navy-950); --bs-btn-active-bg: var(--wg-steel-100); --bs-btn-active-border-color: var(--wg-navy-900); --bs-btn-active-shadow: none; --bs-btn-disabled-color: var(--wg-steel-500); --bs-btn-disabled-bg: var(--wg-surface-soft); --bs-btn-disabled-border-color: var(--wg-border); } /* 4.4 DANGER = destructive ΜΟΝΟ. */ body.weldgrid-shell .btn-danger { --bs-btn-color: var(--wg-text-inverse); --bs-btn-bg: var(--wg-red); --bs-btn-border-color: var(--wg-red); --bs-btn-hover-color: var(--wg-text-inverse); --bs-btn-hover-bg: #9c2222; --bs-btn-hover-border-color: #9c2222; --bs-btn-active-color: var(--wg-text-inverse); --bs-btn-active-bg: #9c2222; --bs-btn-active-border-color: #9c2222; --bs-btn-active-shadow: none; --bs-btn-focus-box-shadow: 0 0 0 var(--wg-focus-width) var(--wg-focus-ring-danger); } /* 4.5 SUCCESS / WARNING / INFO / DARK — υπάρχουν για semantic χρήση, όχι για διακόσμηση. */ body.weldgrid-shell .btn-success { --bs-btn-color: var(--wg-text-inverse); --bs-btn-bg: var(--wg-green); --bs-btn-border-color: var(--wg-green); --bs-btn-hover-color: var(--wg-text-inverse); --bs-btn-hover-bg: #1a6f4e; --bs-btn-hover-border-color: #1a6f4e; --bs-btn-active-bg: #1a6f4e; --bs-btn-active-border-color: #1a6f4e; --bs-btn-active-shadow: none; } body.weldgrid-shell .btn-warning { --bs-btn-color: var(--wg-text-inverse); --bs-btn-bg: var(--wg-amber); --bs-btn-border-color: var(--wg-amber); --bs-btn-hover-color: var(--wg-text-inverse); --bs-btn-hover-bg: #8a5507; --bs-btn-hover-border-color: #8a5507; --bs-btn-active-bg: #8a5507; --bs-btn-active-border-color: #8a5507; --bs-btn-active-shadow: none; } body.weldgrid-shell .btn-info { --bs-btn-color: var(--wg-text-inverse); --bs-btn-bg: var(--wg-info); --bs-btn-border-color: var(--wg-info); --bs-btn-hover-color: var(--wg-text-inverse); --bs-btn-hover-bg: #10648c; --bs-btn-hover-border-color: #10648c; --bs-btn-active-bg: #10648c; --bs-btn-active-border-color: #10648c; --bs-btn-active-shadow: none; } body.weldgrid-shell .btn-dark { --bs-btn-color: var(--wg-text-inverse); --bs-btn-bg: var(--wg-navy-950); --bs-btn-border-color: var(--wg-navy-950); --bs-btn-hover-color: var(--wg-text-inverse); --bs-btn-hover-bg: var(--wg-navy-975); --bs-btn-hover-border-color: var(--wg-navy-975); --bs-btn-active-bg: var(--wg-navy-975); --bs-btn-active-border-color: var(--wg-navy-975); --bs-btn-active-shadow: none; } /* 4.6 OUTLINE variants — steel/navy περίγραμμα, γέμισμα μόνο στο hover. */ body.weldgrid-shell .btn-outline-primary { --bs-btn-color: var(--wg-orange-dark); --bs-btn-border-color: var(--wg-orange); --bs-btn-hover-color: var(--wg-text-inverse); --bs-btn-hover-bg: var(--wg-orange); --bs-btn-hover-border-color: var(--wg-orange); --bs-btn-active-color: var(--wg-text-inverse); --bs-btn-active-bg: var(--wg-orange-dark); --bs-btn-active-border-color: var(--wg-orange-dark); } body.weldgrid-shell .btn-outline-secondary { --bs-btn-color: var(--wg-navy-900); --bs-btn-border-color: var(--wg-border); --bs-btn-hover-color: var(--wg-navy-950); --bs-btn-hover-bg: var(--wg-steel-100); --bs-btn-hover-border-color: var(--wg-navy-900); --bs-btn-active-color: var(--wg-navy-950); --bs-btn-active-bg: var(--wg-steel-100); --bs-btn-active-border-color: var(--wg-navy-900); } body.weldgrid-shell .btn-outline-danger { --bs-btn-color: var(--wg-red); --bs-btn-border-color: var(--wg-red); --bs-btn-hover-color: var(--wg-text-inverse); --bs-btn-hover-bg: var(--wg-red); --bs-btn-hover-border-color: var(--wg-red); --bs-btn-active-color: var(--wg-text-inverse); --bs-btn-active-bg: var(--wg-red); --bs-btn-active-border-color: var(--wg-red); } /* 4.7 ALERTS — soft tints, καθαρό border, ΚΑΝΕΝΑ default Bootstrap παστέλ. */ body.weldgrid-shell .alert { --bs-alert-border-radius: var(--wg-radius); --bs-alert-padding-x: var(--wg-card-padding); --bs-alert-padding-y: var(--wg-card-padding-compact); --bs-alert-color: var(--wg-text); --bs-alert-bg: var(--wg-surface-soft); --bs-alert-border-color: var(--wg-border); --bs-alert-link-color: var(--wg-navy-900); } body.weldgrid-shell .alert-primary { --bs-alert-color: var(--wg-orange-dark); --bs-alert-bg: var(--wg-orange-soft); --bs-alert-border-color: var(--wg-orange); --bs-alert-link-color: var(--wg-orange-dark); } body.weldgrid-shell .alert-secondary, body.weldgrid-shell .alert-light, body.weldgrid-shell .alert-dark { --bs-alert-color: var(--wg-navy-900); --bs-alert-bg: var(--wg-steel-100); --bs-alert-border-color: var(--wg-border); --bs-alert-link-color: var(--wg-navy-950); } body.weldgrid-shell .alert-success { --bs-alert-color: var(--wg-green); --bs-alert-bg: var(--wg-green-soft); --bs-alert-border-color: var(--wg-green); --bs-alert-link-color: var(--wg-green); } body.weldgrid-shell .alert-warning { --bs-alert-color: var(--wg-amber); --bs-alert-bg: var(--wg-amber-soft); --bs-alert-border-color: var(--wg-amber); --bs-alert-link-color: var(--wg-amber); } body.weldgrid-shell .alert-danger { --bs-alert-color: var(--wg-red); --bs-alert-bg: var(--wg-red-soft); --bs-alert-border-color: var(--wg-red); --bs-alert-link-color: var(--wg-red); } body.weldgrid-shell .alert-info { --bs-alert-color: var(--wg-info); --bs-alert-bg: var(--wg-info-soft); --bs-alert-border-color: var(--wg-info); --bs-alert-link-color: var(--wg-info); } /* 4.8 BADGES — τετράγωνα (max 8px), compact, χωρίς pill. */ body.weldgrid-shell .badge { --bs-badge-border-radius: var(--wg-radius-sm); --bs-badge-font-size: var(--wg-font-size-xs); --bs-badge-font-weight: var(--wg-weight-bold); --bs-badge-padding-x: 0.45em; --bs-badge-padding-y: 0.3em; } /* 4.9 CARDS / MODALS / DROPDOWNS / TABLES — γεωμετρία + επιφάνειες στα tokens. */ body.weldgrid-shell .card { --bs-card-border-radius: var(--wg-radius); --bs-card-inner-border-radius: var(--wg-radius-sm); --bs-card-border-color: var(--wg-border); --bs-card-bg: var(--wg-surface); --bs-card-color: var(--wg-text); --bs-card-spacer-x: var(--wg-card-padding); --bs-card-spacer-y: var(--wg-card-padding); --bs-card-cap-bg: var(--wg-surface); } body.weldgrid-shell .modal { --bs-modal-border-radius: var(--wg-radius); --bs-modal-inner-border-radius: var(--wg-radius-sm); --bs-modal-border-color: var(--wg-border); --bs-modal-bg: var(--wg-surface); --bs-modal-color: var(--wg-text); --bs-modal-header-border-color: var(--wg-border); --bs-modal-footer-border-color: var(--wg-border); --bs-modal-padding: var(--wg-modal-padding); --bs-modal-header-padding: var(--wg-modal-padding); --bs-modal-zindex: var(--wg-z-modal); } body.weldgrid-shell .dropdown-menu { --bs-dropdown-border-radius: var(--wg-radius); --bs-dropdown-border-color: var(--wg-border); --bs-dropdown-bg: var(--wg-surface); --bs-dropdown-color: var(--wg-text); --bs-dropdown-link-color: var(--wg-text); --bs-dropdown-link-hover-color: var(--wg-navy-950); --bs-dropdown-link-hover-bg: var(--wg-steel-100); --bs-dropdown-link-active-color: var(--wg-text-inverse); --bs-dropdown-link-active-bg: var(--wg-navy-900); --bs-dropdown-font-size: var(--wg-font-size-sm); --bs-dropdown-zindex: var(--wg-z-dropdown); } body.weldgrid-shell .table { --bs-table-color: var(--wg-text); --bs-table-bg: var(--wg-surface); --bs-table-border-color: var(--wg-border); --bs-table-striped-bg: var(--wg-surface-soft); --bs-table-striped-color: var(--wg-text); --bs-table-hover-bg: var(--wg-steel-100); --bs-table-hover-color: var(--wg-text); --bs-table-active-bg: var(--wg-orange-soft); --bs-table-active-color: var(--wg-text); --bs-table-cell-padding-y: var(--wg-table-cell-y); --bs-table-cell-padding-x: var(--wg-table-cell-x); } body.weldgrid-shell .form-control, body.weldgrid-shell .form-select { --bs-border-radius: var(--wg-radius); } /* 4.10 PROGRESS / SPINNERS / NAV — καμία default μπλε λωρίδα. */ body.weldgrid-shell .progress { --bs-progress-bg: var(--wg-steel-100); --bs-progress-bar-bg: var(--wg-orange); --bs-progress-border-radius: var(--wg-radius-sm); --bs-progress-height: 0.5rem; } body.weldgrid-shell .nav { --bs-nav-link-color: var(--wg-text-muted); --bs-nav-link-hover-color: var(--wg-navy-900); --bs-nav-link-font-size: var(--wg-font-size-sm); } body.weldgrid-shell .pagination { --bs-pagination-color: var(--wg-navy-900); --bs-pagination-bg: var(--wg-surface); --bs-pagination-border-color: var(--wg-border); --bs-pagination-border-radius: var(--wg-radius-sm); --bs-pagination-hover-color: var(--wg-navy-950); --bs-pagination-hover-bg: var(--wg-steel-100); --bs-pagination-hover-border-color: var(--wg-border); --bs-pagination-focus-color: var(--wg-navy-950); --bs-pagination-focus-bg: var(--wg-steel-100); --bs-pagination-focus-box-shadow: 0 0 0 var(--wg-focus-width) var(--wg-focus-ring); --bs-pagination-active-color: var(--wg-text-inverse); --bs-pagination-active-bg: var(--wg-orange); --bs-pagination-active-border-color: var(--wg-orange); --bs-pagination-disabled-color: var(--wg-steel-500); --bs-pagination-disabled-bg: var(--wg-surface-soft); --bs-pagination-disabled-border-color: var(--wg-border); --bs-pagination-font-size: var(--wg-font-size-sm); } /* ───────────────────────────────────────────────────────────────────────────────────── 5. SCROLLBARS — κοινό θέμα (Firefox + WebKit) + navy sidebar παραλλαγή Radius: var(--wg-radius-sm). ΟΧΙ 999px — ο κανόνας «max 8px» ισχύει και εδώ. ───────────────────────────────────────────────────────────────────────────────────── */ html:has(body.weldgrid-shell), body.weldgrid-shell, body.weldgrid-shell * { scrollbar-width: thin; scrollbar-color: var(--wg-scrollbar-thumb) var(--wg-scrollbar-track); } body.weldgrid-shell ::-webkit-scrollbar { width: var(--wg-scrollbar-size); height: var(--wg-scrollbar-size); } body.weldgrid-shell ::-webkit-scrollbar-track { border-radius: var(--wg-radius-sm); background: var(--wg-scrollbar-track); } body.weldgrid-shell ::-webkit-scrollbar-thumb { border: 1px solid var(--wg-scrollbar-track); border-radius: var(--wg-radius-sm); background: var(--wg-scrollbar-thumb); } body.weldgrid-shell ::-webkit-scrollbar-thumb:hover { background: var(--wg-scrollbar-thumb-hover); } body.weldgrid-shell ::-webkit-scrollbar-corner { background: var(--wg-scrollbar-track); } /* 5.1 NAVY SIDEBAR — ημιδιαφανές λευκό thumb πάνω σε σκούρο ground. (Το #main_sidebar_panel έχει ήδη ID-level κανόνες στο wg-shell.css:846-868 με τις ίδιες τιμές - εδώ καλύπτεται όλο το υπόλοιπο sidebar subtree.) */ body.weldgrid-shell .app-sidebar, body.weldgrid-shell .app-sidebar * { scrollbar-width: thin; scrollbar-color: var(--wg-scrollbar-thumb-inverse) var(--wg-scrollbar-track-inverse); } body.weldgrid-shell .app-sidebar ::-webkit-scrollbar, body.weldgrid-shell .app-sidebar::-webkit-scrollbar { width: 0.35rem; height: 0.35rem; } body.weldgrid-shell .app-sidebar ::-webkit-scrollbar-track, body.weldgrid-shell .app-sidebar::-webkit-scrollbar-track { border-radius: var(--wg-radius-sm); background: var(--wg-scrollbar-track-inverse); } body.weldgrid-shell .app-sidebar ::-webkit-scrollbar-thumb, body.weldgrid-shell .app-sidebar::-webkit-scrollbar-thumb { border: 0; border-radius: var(--wg-radius-sm); background: var(--wg-scrollbar-thumb-inverse); } body.weldgrid-shell .app-sidebar ::-webkit-scrollbar-thumb:hover, body.weldgrid-shell .app-sidebar::-webkit-scrollbar-thumb:hover { background: var(--wg-scrollbar-thumb-inverse-hover); } /* 5.2 OPT-OUT ΓΙΑ ΠΡΟΣΤΑΤΕΥΜΕΝΕΣ ΕΠΙΦΑΝΕΙΕΣ Το Live Excel grid (.wg-db-excel-grid) υπολογίζει viewport/virtualization από clientWidth/clientHeight και ο PDF viewer (.wg-pdf-workspace) έχει δικό του scrollbar theme στο legacy (style-dashboard.css:12260-12293). Κρατάμε native πλάτος scrollbar εκεί ώστε να μη μετακινηθεί τίποτα. */ body.weldgrid-shell .wg-db-excel-grid, body.weldgrid-shell .wg-db-excel-grid *, body.weldgrid-shell .wg-pdf-workspace, body.weldgrid-shell .wg-pdf-workspace * { scrollbar-width: auto; scrollbar-color: auto; } body.weldgrid-shell .wg-db-excel-grid ::-webkit-scrollbar, body.weldgrid-shell .wg-db-excel-grid::-webkit-scrollbar { width: 12px; height: 12px; } body.weldgrid-shell .wg-db-excel-grid ::-webkit-scrollbar-track, body.weldgrid-shell .wg-db-excel-grid::-webkit-scrollbar-track { border-radius: 0; background: var(--wg-surface-muted); } body.weldgrid-shell .wg-db-excel-grid ::-webkit-scrollbar-thumb, body.weldgrid-shell .wg-db-excel-grid::-webkit-scrollbar-thumb { border: 2px solid var(--wg-surface-muted); border-radius: var(--wg-radius-sm); background: var(--wg-steel-500); } /* ───────────────────────────────────────────────────────────────────────────────────── 6. PREFERS-REDUCED-MOTION ΤΟ ΜΟΝΟ ΜΠΛΟΚ ΤΟΥ ΑΡΧΕΙΟΥ ΜΕ !important, ΚΑΙ ΕΙΝΑΙ ΑΝΑΠΟΦΕΥΚΤΟ: ο universal selector έχει specificity 0 και δεν μπορεί να νικήσει καμία δηλωμένη animation/transition χωρίς αυτό. Καθολικό kill switch για shimmer / toast progress / modal fades, όπως ορίζει το WP-01 §5. Το `body.wg-reduced-motion` (ίδια σημασιολογία, opt-in από JS) καλύπτεται ήδη στο wg-shell.css:504-511. ───────────────────────────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { html:has(body.weldgrid-shell) { scroll-behavior: auto !important; } body.weldgrid-shell, body.weldgrid-shell *, body.weldgrid-shell *::before, body.weldgrid-shell *::after { animation-delay: 0ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-delay: 0ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } :root:root, html body.weldgrid-shell { --wg-transition: 0.01ms linear; --wg-transition-fast: 0.01ms linear; } }