/* Imported here rather than linked per host: every host already links app.css, so there is no to forget. The theme rules are inert until a .restaurant-theme wrapper exists, and the font faces cost nothing until a family is actually asked for. */ @import url('css/fonts.css'); @import url('css/restaurant-theme.css'); /* No background or colour here. MudBlazor owns the page surface and knows which mode it is in; pinning it to the light tokens is what put light text on a cream page the moment dark mode was on — the palette said one thing and these two lines said another. */ html, body { font-family: 'Barlow', 'Helvetica Neue', Helvetica, Arial, sans-serif; } /* These four rules came from the Blazor project template and were still painting its blue on links, buttons and every focus ring — under a burgundy app bar, on cream paper. Pointed at the tokens, which means they now follow a restaurant's own colours too. */ a, .btn-link { color: var(--bt); } .btn-primary { color: var(--on-brand); background-color: var(--brand); border-color: var(--brand); } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem var(--pap), 0 0 0 0.25rem var(--bt); } .content { padding-top: 1.1rem; } h1:focus { outline: none; } .valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } .invalid { outline: 1px solid #e50000; } .validation-message { color: #e50000; } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred." } .darker-border-checkbox.form-check-input { border-color: #929292; } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } /* ── La marque dans la barre du haut ────────────────────────────────────────── NON SCOPÉ : deux mises en page s'en servent — celle du convive et celle du gestionnaire — et une classe scopée n'existe que pour le composant qui la déclare. TOUT EST TEINTÉ PAR `currentColor`, donc par la couleur de texte de la barre : celle que le thème a choisie pour être lisible sur son propre fond. C'est ce qui rend la marque sûre partout — la barre du convive prend la teinte du RESTAURANT, celle du gestionnaire suit le thème clair ou sombre, et un logo à couleur fixe serait illisible sur l'une ou sur l'autre. UN MASQUE, pas une image, parce qu'une balise `img` n'hérite pas d'une couleur. D'où deux contraintes qui ne vont pas de soi : la taille doit être explicite — un élément masqué n'a pas de dimension intrinsèque — et le fichier doit être SANS FOND. Un logo posé sur une plaque opaque, utilisé comme masque, laisse tout passer : la barre affiche alors un rectangle plein. La couleur du fichier, elle, est sans importance ; seule sa transparence compte. Propriétés LONGUES et non la forme abrégée : `mask: url() no-repeat center / contain` est rejetée en bloc par certains moteurs, et une déclaration rejetée ne laisse rien — donc le même rectangle. */ .appbar-tinted { background-color: currentColor; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; mask-repeat: no-repeat; mask-position: center; mask-size: contain; } /* LE LOGO COMPLET, hors immersion : il remplit la barre sans pousser les boutons dehors. La barre fait 64 px ; 40 px de haut la remplissent à l'oeil. Le verrou est la largeur — le logo est environ quatre fois plus large que haut — et sur un téléphone de 360 px il reste le menu, le panier, la cloche et le compte : la limite en `vw` le fait RÉTRÉCIR plutôt que déborder. Une identité qui chasse le panier hors de l'écran coûte des commandes. */ .appbar-logo { display: block; height: 40px; width: min(167px, 44vw); flex: 0 0 auto; -webkit-mask-image: url("/_content/CleverFoods.UI.Shared/brand/logos/logo-mono-black.svg"); mask-image: url("/_content/CleverFoods.UI.Shared/brand/logos/logo-mono-black.svg"); } /* LA MARQUE SEULE, en immersion : un carré à hauteur d'icône, à côté du hamburger. Le mot disparaît parce que le titre dit désormais le restaurant — deux noms côte à côte se disputeraient la lecture, et ce n'est pas celui de Krokeat que le convive cherche. */ .appbar-mark { display: block; width: 30px; height: 30px; flex: 0 0 auto; /* `safari-pinned-tab` est la silhouette carrée sans fond que le kit fournit déjà — inutile d'en dériver une. Son seul `` blanc vit À L'INTÉRIEUR d'un `` SVG, donc il ne peint rien : c'est la zone visible du masque interne, pas un fond de page. Les icônes `icon.svg` et `icon-maskable.svg`, elles, portent une vraie plaque et ne conviendraient pas. */ -webkit-mask-image: url("/_content/CleverFoods.UI.Shared/brand/icons/safari-pinned-tab.svg"); mask-image: url("/_content/CleverFoods.UI.Shared/brand/icons/safari-pinned-tab.svg"); } /* LE NOM DU RESTAURANT, et le seul risque qu'il porte : « Restaurant Le Vieux Moulin de la Grand Place » pousserait le panier hors de l'écran. Il se tronque donc, et il est le SEUL élément autorisé à rétrécir — les boutons, eux, ne se négocient pas. */ .appbar-place { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }