Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Sa4nUG3GtbdEaPS6fA8eq1
76 lines
2.2 KiB
Plaintext
76 lines
2.2 KiB
Plaintext
// Compléments CSS charte vBlog.io pour le skin Elastic (Roundcube)
|
|
// Emplacement : skins/elastic/styles/_styles.less
|
|
|
|
// --- Police Poppins auto-hébergée (pas d'appel à Google Fonts) ---
|
|
// Fichiers à copier dans skins/elastic/fonts/ (source : paquet npm @fontsource/poppins, licence OFL)
|
|
@font-face {
|
|
font-family: 'Poppins';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: url('../fonts/poppins-latin-400-normal.woff2') format('woff2');
|
|
}
|
|
@font-face {
|
|
font-family: 'Poppins';
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: url('../fonts/poppins-latin-400-italic.woff2') format('woff2');
|
|
}
|
|
@font-face {
|
|
font-family: 'Poppins';
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
font-display: swap;
|
|
src: url('../fonts/poppins-latin-700-normal.woff2') format('woff2');
|
|
}
|
|
@font-face {
|
|
font-family: 'Poppins';
|
|
font-style: italic;
|
|
font-weight: 700;
|
|
font-display: swap;
|
|
src: url('../fonts/poppins-latin-700-italic.woff2') format('woff2');
|
|
}
|
|
|
|
body, button, input, optgroup, select, textarea, .popover {
|
|
font-family: Poppins, Roboto, sans-serif;
|
|
}
|
|
|
|
// --- Bouton principal de la page de login en orange (CTA du blog) ---
|
|
#login-form .btn-primary {
|
|
background-color: @vblog-accent;
|
|
border-color: @vblog-accent;
|
|
|
|
&:hover, &:focus {
|
|
background-color: darken(@vblog-accent, 8%);
|
|
border-color: darken(@vblog-accent, 8%);
|
|
}
|
|
}
|
|
|
|
// --- Mode sombre : liens lisibles sur fond sombre, bouton "Écrire" en orange ---
|
|
// :where() ramène la spécificité à celle de la règle de base "a { color: @color-link }"
|
|
// de global.less : seuls les liens "nus" changent, pas les listes ni les boutons.
|
|
:where(html.dark-mode) a {
|
|
color: lighten(@vblog-primary, 40%);
|
|
|
|
&:hover {
|
|
color: lighten(@vblog-primary, 50%);
|
|
}
|
|
}
|
|
|
|
html.dark-mode {
|
|
#taskmenu .action-buttons a {
|
|
color: @vblog-accent;
|
|
}
|
|
|
|
// Elastic assombrit le logo en mode sombre (opacity .8) : on le laisse net
|
|
#logo {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
// --- Logo du menu latéral : l'emblème est presque carré, on lui laisse de l'air ---
|
|
#layout-menu .popover-header img {
|
|
padding: .6rem;
|
|
}
|