Bibliothèque d'interface
selixy-design
Chaque classe, avec son nom, sur la page. CSS pur, sans build, partagé par les projets Selixy.
Jetons tokens.css
- --bg-0
- --bg-1
- --bg-2
- --bg-3
- --text
- --text-h
- --text-dim
- --border
- --accent
- --accent-strong
- --warning
- --danger
Typographie typography.css
.text--display-lg
.text--display
.text--heading
.text--eyebrow .text--accent
.text--body-lg : paragraphe d'accroche.
.text--body : corps de texte courant.
.text--body-sm .text--soft
.text--caption .text--dim
.text--micro
.text--mono
En-tête header.css burger.css underline.css
- verre
- sur ::before, --header-shift 7 %, --header-blur 28 px
- --header-height
- 41 px
- bord
- 1 px --border en bas
- onglets
- .tab, 80 px de large minimum
- sous 900 px
- onglets masqués, marque centrée, burger visible
- au-delà
- logo seul, burger masqué sauf .burger--desktop
Par défaut
Marque
.header .header-start .header-brand .header-tabs .tab .header-account .burger--desktopBoutons button.css
- --button-height
- 48 px
- --button-height-s / -l
- 36 / 64 px
- --button-pad
- 1,1 rem
- --button-shift
- 9 %, 18 % au survol
- coins
- vifs, sauf bas-droit à --button-radius 16 px
Par défaut
.button __label __chip.button--primary.button--secondary.button--danger.button--subtle.button sans __label ni __chip.button--chip-start.button--s .button--l.button__sub:disabled [aria-busy="true"].button--icon.button--block.button--sharp --round-tl/-tr/-br/-bl --roundFormulaires base.css
- --field-height
- 56 px
- --field-pad
- 1 rem
- --field-shift
- 9 %, 15 % au focus
- --field-bar
- 4 px
Par défaut
.form-card .field .switch .hint .error.field__input [aria-invalid="true"]Verre glass.css
- --glass-tint
- noir (clair), blanc (sombre)
- --glass-shift
- 7 %
- --glass-blur
- 14 px
Par défaut
Texte sous le verre
.glass
.glassTexte sous le verre
voile 15 %
style="--glass-shift: 15%" voile plus marquéTexte sous le verre
flou 4 px
style="--glass-blur: 4px" flou plus légerPanneaux panel.css
- --panel-shift
- 5 %
- --panel-blur
- 14 px
- coins
- vifs
- --panel-radius
- 16 px
Par défaut
.panel
--round
.panel .panel--roundtl
tr
br
bl
.panel--round-tl/-tr/-br/-blsharp-t
sharp-l
.panel--sharp -t/-b/-l/-r- .panel-label
- Lien courant
- .panel-item.is-active
.panel-list .panel-separatorComposants components.css underline.css
- --banner-shift
- 16 %
- --transition
- 200 ms
Par défaut
.surface
--clickable
.surface .surface--clickable.pill.tagtag--mono
.pill .tag .tag--monoDisponible
.badge .badge__dot.banner.empty : rien ici pour l'instant.
.empty.link-card .icon-pill.floating-button --back.underline-fade .underline-fade-vOuvrir la fenêtre
.popup __sheet __action--cancelDispositions components.css
- gap
- --space-2, 1 rem
- --grid-min
- 12 rem
Par défaut
undeux
.stackundeux
.row123
.grid --grid-minLecteur player.css player-controls.css
- cadre
- 16/9, noir, --player-radius 24 px, anneau --player-ring et halo --player-halo
- --player-veil
- noir 7 % (verre des îlots)
- --player-accent
- #b6a8ff (bouton enfoncé)
- --player-fill
- dégradé #9a86ff → #d58cff
- barre
- 4,5 px, 9 px au survol, point blanc 12 px
- boutons
- ronds 38 px, sans fond, 1,1 au survol
- mobile (< 900 px)
- arrondi en bas seulement, boutons 36 px, max 70 dvh
Par défaut
Ocean Drift
4:12
4:12 / 11:03
.player __controls __bar __island __button __previewOcean Drift
4:12 / 11:03
.player--light image claire : commandes foncéesOcean Drift
4:12 / 11:03
.player--full plein écran : titre, précédent/suivant, temps, chatOcean Drift
4:12 / 11:03
.player--idle souris immobile : commandes masquéesOcean Drift
Lofi
4:12 / 11:03
.player--audio __nameOcean Drift
4:12 / 11:03
.player--empty __playCartes card.css
- fond
- verre (--glass-shift, --glass-blur)
- texte
- --text-h, blanc sur image
- --card-height
- 100 svh
- coins
- vifs
- --card-radius
- 16 px
- --card-hover-scale
- 1,04
Par défaut
__cover __panel __title __tags.card__cover--image .card--round-*