williamandClaude Sonnet 5
f2a73f2c73
Met en place les fondations du template Bulma décrit dans regles/FORGE_ENGINE_TEMPLATE_BULMA.md : palette orange/ambre Forge (--accent:#ff5f2e/--accent-2:#ffb020), typographie, rayons — appliqués en recompilant Bulma lui-même plutôt qu'en le surchargeant après coup en CSS, pour recolorer automatiquement ses composants internes (tags, notifications, dropdowns...) sans avoir à les surcharger un par un. - Bulma 0.9.4 vendoré en local (styles/bulma/, source Sass classique $variable + @import) — PAS 1.0.2 (la version jusqu'ici en CDN) : 1.0.2 utilise le nouveau système de modules @use/@forward, que libsass (choisi pour rester 100% Python, sans Node/npm) ne sait pas compiler (testé : il ignore silencieusement le @use au lieu de le traiter). 0.9.4 est la dernière version compatible avec libsass et couvre à l'identique tous les composants utilisés ici (boutons, tableaux, onglets, modales, formulaires, navbar). - requirements.txt : +libsass (pip pur, aucun binaire/Node.js). - styles/forge-theme.scss (nouveau, point d'entrée) : variables Sass Bulma ($primary, $radius...) posées avant l'import, tokens Forge exposés en :root (--forge-bg, --accent, --gradient, --status-*...) avec des alias vers les noms de variables déjà utilisés par tout le CSS custom existant (--bg/--panel/--border/--text/--danger...) — pas besoin de renommer les ~600 lignes de règles déjà écrites, seules leurs VALEURS changent. - styles/forge-custom.scss : ancien static/style.css, structurellement inchangé — seuls les hex/rgba en dur qui échappaient aux variables (ancien accent bleu #5b8cff, danger #e2685f, couleurs de types de nœuds du graphe de logique, fond du QR code recovery...) sont remplacés par les tokens de la charte. - build_css.py (nouveau) : compile styles/forge-theme.scss en static/style.css via libsass — un seul fichier, un seul <link> inchangé dans les templates, à relancer manuellement après toute modification sous styles/. - base.html/play.html : suppression du <link> CDN Bulma (auto-hébergé désormais), ajout d'un favicon (absent jusqu'ici) et du vrai logo Forge dans la navbar (assets/*.svg copiés dans static/branding/, seul dossier réellement servi par Flask). 197 tests toujours verts (aucune assertion sur des valeurs CSS). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
304 lines
6.1 KiB
Sass
304 lines
6.1 KiB
Sass
@import "derived-variables"
|
|
|
|
=clearfix
|
|
&::after
|
|
clear: both
|
|
content: " "
|
|
display: table
|
|
|
|
=center($width, $height: 0)
|
|
position: absolute
|
|
@if $height != 0
|
|
left: calc(50% - (#{$width} * 0.5))
|
|
top: calc(50% - (#{$height} * 0.5))
|
|
@else
|
|
left: calc(50% - (#{$width} * 0.5))
|
|
top: calc(50% - (#{$width} * 0.5))
|
|
|
|
=fa($size, $dimensions)
|
|
display: inline-block
|
|
font-size: $size
|
|
height: $dimensions
|
|
line-height: $dimensions
|
|
text-align: center
|
|
vertical-align: top
|
|
width: $dimensions
|
|
|
|
=hamburger($dimensions)
|
|
-moz-appearance: none
|
|
-webkit-appearance: none
|
|
appearance: none
|
|
background: none
|
|
border: none
|
|
cursor: pointer
|
|
display: block
|
|
height: $dimensions
|
|
position: relative
|
|
width: $dimensions
|
|
span
|
|
background-color: currentColor
|
|
display: block
|
|
height: 1px
|
|
left: calc(50% - 8px)
|
|
position: absolute
|
|
transform-origin: center
|
|
transition-duration: $speed
|
|
transition-property: background-color, opacity, transform
|
|
transition-timing-function: $easing
|
|
width: 16px
|
|
&:nth-child(1)
|
|
top: calc(50% - 6px)
|
|
&:nth-child(2)
|
|
top: calc(50% - 1px)
|
|
&:nth-child(3)
|
|
top: calc(50% + 4px)
|
|
&:hover
|
|
background-color: bulmaRgba(black, 0.05)
|
|
// Modifers
|
|
&.is-active
|
|
span
|
|
&:nth-child(1)
|
|
transform: translateY(5px) rotate(45deg)
|
|
&:nth-child(2)
|
|
opacity: 0
|
|
&:nth-child(3)
|
|
transform: translateY(-5px) rotate(-45deg)
|
|
|
|
=overflow-touch
|
|
-webkit-overflow-scrolling: touch
|
|
|
|
=placeholder
|
|
$placeholders: ':-moz' ':-webkit-input' '-moz' '-ms-input'
|
|
@each $placeholder in $placeholders
|
|
&:#{$placeholder}-placeholder
|
|
@content
|
|
|
|
=reset
|
|
-moz-appearance: none
|
|
-webkit-appearance: none
|
|
appearance: none
|
|
background: none
|
|
border: none
|
|
color: currentColor
|
|
font-family: inherit
|
|
font-size: 1em
|
|
margin: 0
|
|
padding: 0
|
|
|
|
// Responsiveness
|
|
|
|
=from($device)
|
|
@media screen and (min-width: $device)
|
|
@content
|
|
|
|
=until($device)
|
|
@media screen and (max-width: $device - 1px)
|
|
@content
|
|
|
|
=between($from, $until)
|
|
@media screen and (min-width: $from) and (max-width: $until - 1px)
|
|
@content
|
|
|
|
=mobile
|
|
@media screen and (max-width: $tablet - 1px)
|
|
@content
|
|
|
|
=tablet
|
|
@media screen and (min-width: $tablet), print
|
|
@content
|
|
|
|
=tablet-only
|
|
@media screen and (min-width: $tablet) and (max-width: $desktop - 1px)
|
|
@content
|
|
|
|
=touch
|
|
@media screen and (max-width: $desktop - 1px)
|
|
@content
|
|
|
|
=desktop
|
|
@media screen and (min-width: $desktop)
|
|
@content
|
|
|
|
=desktop-only
|
|
@if $widescreen-enabled
|
|
@media screen and (min-width: $desktop) and (max-width: $widescreen - 1px)
|
|
@content
|
|
|
|
=until-widescreen
|
|
@if $widescreen-enabled
|
|
@media screen and (max-width: $widescreen - 1px)
|
|
@content
|
|
|
|
=widescreen
|
|
@if $widescreen-enabled
|
|
@media screen and (min-width: $widescreen)
|
|
@content
|
|
|
|
=widescreen-only
|
|
@if $widescreen-enabled and $fullhd-enabled
|
|
@media screen and (min-width: $widescreen) and (max-width: $fullhd - 1px)
|
|
@content
|
|
|
|
=until-fullhd
|
|
@if $fullhd-enabled
|
|
@media screen and (max-width: $fullhd - 1px)
|
|
@content
|
|
|
|
=fullhd
|
|
@if $fullhd-enabled
|
|
@media screen and (min-width: $fullhd)
|
|
@content
|
|
|
|
=breakpoint($name)
|
|
$breakpoint: map-get($breakpoints, $name)
|
|
@if $breakpoint
|
|
$from: map-get($breakpoint, "from")
|
|
$until: map-get($breakpoint, "until")
|
|
@if $from and $until
|
|
+between($from, $until)
|
|
@content
|
|
@else if $from
|
|
+from($from)
|
|
@content
|
|
@else if $until
|
|
+until($until)
|
|
@content
|
|
|
|
=ltr
|
|
@if not $rtl
|
|
@content
|
|
|
|
=rtl
|
|
@if $rtl
|
|
@content
|
|
|
|
=ltr-property($property, $spacing, $right: true)
|
|
$normal: if($right, "right", "left")
|
|
$opposite: if($right, "left", "right")
|
|
@if $rtl
|
|
#{$property}-#{$opposite}: $spacing
|
|
@else
|
|
#{$property}-#{$normal}: $spacing
|
|
|
|
=ltr-position($spacing, $right: true)
|
|
$normal: if($right, "right", "left")
|
|
$opposite: if($right, "left", "right")
|
|
@if $rtl
|
|
#{$opposite}: $spacing
|
|
@else
|
|
#{$normal}: $spacing
|
|
|
|
// Placeholders
|
|
|
|
=unselectable
|
|
-webkit-touch-callout: none
|
|
-webkit-user-select: none
|
|
-moz-user-select: none
|
|
-ms-user-select: none
|
|
user-select: none
|
|
|
|
=arrow($color: transparent)
|
|
border: 3px solid $color
|
|
border-radius: 2px
|
|
border-right: 0
|
|
border-top: 0
|
|
content: " "
|
|
display: block
|
|
height: 0.625em
|
|
margin-top: -0.4375em
|
|
pointer-events: none
|
|
position: absolute
|
|
top: 50%
|
|
transform: rotate(-45deg)
|
|
transform-origin: center
|
|
width: 0.625em
|
|
|
|
=block($spacing: $block-spacing)
|
|
&:not(:last-child)
|
|
margin-bottom: $spacing
|
|
|
|
=delete
|
|
+unselectable
|
|
-moz-appearance: none
|
|
-webkit-appearance: none
|
|
background-color: bulmaRgba($scheme-invert, 0.2)
|
|
border: none
|
|
border-radius: $radius-rounded
|
|
cursor: pointer
|
|
pointer-events: auto
|
|
display: inline-block
|
|
flex-grow: 0
|
|
flex-shrink: 0
|
|
font-size: 0
|
|
height: 20px
|
|
max-height: 20px
|
|
max-width: 20px
|
|
min-height: 20px
|
|
min-width: 20px
|
|
outline: none
|
|
position: relative
|
|
vertical-align: top
|
|
width: 20px
|
|
&::before,
|
|
&::after
|
|
background-color: $scheme-main
|
|
content: ""
|
|
display: block
|
|
left: 50%
|
|
position: absolute
|
|
top: 50%
|
|
transform: translateX(-50%) translateY(-50%) rotate(45deg)
|
|
transform-origin: center center
|
|
&::before
|
|
height: 2px
|
|
width: 50%
|
|
&::after
|
|
height: 50%
|
|
width: 2px
|
|
&:hover,
|
|
&:focus
|
|
background-color: bulmaRgba($scheme-invert, 0.3)
|
|
&:active
|
|
background-color: bulmaRgba($scheme-invert, 0.4)
|
|
// Sizes
|
|
&.is-small
|
|
height: 16px
|
|
max-height: 16px
|
|
max-width: 16px
|
|
min-height: 16px
|
|
min-width: 16px
|
|
width: 16px
|
|
&.is-medium
|
|
height: 24px
|
|
max-height: 24px
|
|
max-width: 24px
|
|
min-height: 24px
|
|
min-width: 24px
|
|
width: 24px
|
|
&.is-large
|
|
height: 32px
|
|
max-height: 32px
|
|
max-width: 32px
|
|
min-height: 32px
|
|
min-width: 32px
|
|
width: 32px
|
|
|
|
=loader
|
|
animation: spinAround 500ms infinite linear
|
|
border: 2px solid $grey-lighter
|
|
border-radius: $radius-rounded
|
|
border-right-color: transparent
|
|
border-top-color: transparent
|
|
content: ""
|
|
display: block
|
|
height: 1em
|
|
position: relative
|
|
width: 1em
|
|
|
|
=overlay($offset: 0)
|
|
bottom: $offset
|
|
left: $offset
|
|
position: absolute
|
|
right: $offset
|
|
top: $offset
|