Server : Apache System : Linux webd348.cluster026.gra.hosting.ovh.net 5.15.148-ovh-vps-grsec-zfs-classid #1 SMP Thu Feb 8 09:41:04 UTC 2024 x86_64 User : hednacluml ( 122243) PHP Version : 8.3.9 Disable Function : _dyuweyrj4,_dyuweyrj4r,dl Directory : /home/hednacluml/militer/prive/themes/spip/ |
[(#REM)
Ce squelette définit les styles des menus onglets de l'espace privé
Organisation du fichier :
1. Onglets simples
2. Barre onglets
<style>]
#CACHE{3600*100,cache-client}
#HTTP_HEADER{Content-Type: text/css;charset=utf-8}
#HTTP_HEADER{Vary: Accept-Encoding}
/* ============
* 0. Variables
* ============
*/
:root {
--spip-tabs-border-width: 2px;
--spip-tabs-border-radius: var(--spip-border-radius);
--spip-tabs-spacing-x: 1em;
--spip-tabs-spacing-y: 0.5em;
}
/**
* =================
* 0. Onglets (tous)
* =================
* Styles mutualisés
*/
.onglets_simple a:focus,
.barre_onglet a:focus {
box-shadow: 0 0 0 0.2rem var(--spip-btn-color-focus);
outline: none;
z-index: 2;
}
/* ==================
* 1. Onglets simples
* ==================
*
* Markup :
*
* div.onglets_simple
* ul
* li
* strong | a
* div.onglets_simple.second
* ul
* li
* strong | a
* ul…
*/
/**
* Onglets de base
*/
.onglets_simple {
display: flex;
justify-content: space-between;
flex-flow: row wrap;
margin: calc(var(--spip-spacing-y) * 1.5) 0;
border-bottom: var(--spip-tabs-border-width) solid hsla(0, 0%, 0%, 0.1);
}
.onglets_simple ul {
display: flex;
flex-flow: row wrap;
padding: 0;
margin: 0 0 calc(var(--spip-tabs-border-width) * -1); /* Empiéter sur la bordure du bas */
list-style: none;
}
.onglets_simple ul:only-of-type {
flex: 1; /* si groupe unique, permettre d'aggrandir pour garder l'alignement à gauche */
}
.onglets_simple ul + ul,
.onglets_simple.second ul + ul {
margin-#LEFT: calc(var(--spip-tabs-spacing-x) * 2);
}
.onglets_simple li {
display: flex;
padding: 0;
margin: 0;
}
/* Items */
.onglets_simple li strong,
.onglets_simple li a {
flex: 1;
position: relative;
display: block;
padding: calc(var(--spip-tabs-spacing-y) * 2) var(--spip-tabs-spacing-x);
border-bottom: var(--spip-tabs-border-width) solid transparent;
transition: background 0.15s, border 0.15s;
text-align: center;
font-weight: 500;
font-size: 0.9em;
background-position: center var(--spip-left);
background-repeat: no-repeat;
}
/* Items non exposés (liens) */
.onglets_simple li a {
color: var(--spip-color-gray-dark);
text-decoration: none;
}
.onglets_simple li a:hover,
.onglets_simple li a:active {
cursor: pointer;
z-index: 2;
}
.onglets_simple li a:hover {
background-color: var(--spip-color-theme-lightest);
border-bottom-color: var(--spip-color-theme-light);
}
.onglets_simple li a:active {
background-color: var(--spip-color-theme-lighter);
border-bottom-color: var(--spip-color-theme);
}
/* Item exposé */
.onglets_simple li strong {
color: var(--spip-color-theme-dark);
border-bottom-color: var(--spip-color-theme-dark);
z-index: 2;
}
/* Divers */
.onglets_simple .cadre-icone {
display: none;
}
/* Variante bloc */
.onglets_simple.bloc ul {
flex-wrap: nowrap;
}
.onglets_simple.bloc ul li {
flex: 1;
}
/**
* Onglets secondaires = filtres
*/
.onglets_simple.second {
border: 0;
justify-content: flex-start;
}
.onglets_simple.second ul {
margin: 0;
}
/* Items */
.onglets_simple.second li strong,
.onglets_simple.second li a {
padding: var(--spip-tabs-spacing-y) var(--spip-tabs-spacing-x);
text-transform: none;
border: 1px solid var(--spip-color-gray-light);
border-radius: var(--spip-tabs-border-radius);
}
.onglets_simple.second li:not(:first-child) > * {
border-top-#LEFT-radius: 0;
border-bottom-#LEFT-radius: 0;
}
.onglets_simple.second li:not(:last-child) > * {
border-top-#RIGHT-radius: 0;
border-bottom-#RIGHT-radius: 0;
}
.onglets_simple.second li:not(:first-child):not(:only-child) > * {
margin-#LEFT: -1px;
}
/* Items non exposés (liens) */
.onglets_simple.second li a {
background-color: transparent;
}
.onglets_simple.second li a:hover,
.onglets_simple.second li a:focus,
.onglets_simple.second li a:active {
color: var(--spip-color-theme-dark);
border-color: var(--spip-color-theme);
}
.onglets_simple.second li a:hover {
background-color: var(--spip-color-theme-lightest);
}
.onglets_simple.second li a:active {
background-color: var(--spip-color-theme-light);
}
/* Item exposé */
.onglets_simple.second li strong {
background-color: var(--spip-color-theme-dark);
border-color: var(--spip-color-theme-dark);
color: white;
}
/* ================
* 2. Barre onglets
* ================
*
* Markup :
*
* div.barre_onglet
* ul
* li
* [img.cadre-icone]
* strong | a
*/
.barre_onglet {
margin: calc(var(--spip-spacing-y) * 1.5) 0;
}
.barre_onglet ul {
display: flex;
flex-flow: row wrap;
justify-content: center;
margin: 0 auto;
padding: 0;
margin: 0;
text-align: var(--spip-left);
list-style:none;
}
.barre_onglet li {
margin: 0;
padding: 0;
position: relative;
list-style: none;
}
/* Items */
.barre_onglet a,
.barre_onglet strong {
display: block;
padding: calc(var(--spip-tabs-spacing-y) * 1.5) var(--spip-tabs-spacing-x);
font-weight: 500;
text-decoration: none;
transition: background 0.15s, border 0.15s;
border-radius: 99em;
}
.barre_onglet li:first-child a,
.barre_onglet li:first-child strong {
padding-#LEFT: calc(var(--spip-tabs-spacing-x) * 1.5); /* plus grand because arrondi */
}
.barre_onglet li:last-child a,
.barre_onglet li:last-child strong {
padding-#RIGHT: calc(var(--spip-tabs-spacing-x) * 1.5); /* plus grand because arrondi */
}
.barre_onglet li:not(:last-child) a,
.barre_onglet li:not(:last-child) strong {
border-right: 1px solid hsla(0, 0%, 0%, 0.1);
}
.barre_onglet li:not(:first-child) a,
.barre_onglet li:not(:first-child) strong {
border-top-#LEFT-radius: 0;
border-bottom-#LEFT-radius: 0;
}
.barre_onglet li:not(:last-child) a,
.barre_onglet li:not(:last-child) strong {
border-top-#RIGHT-radius: 0;
border-bottom-#RIGHT-radius: 0;
}
/* Item non exposé (lien) */
.barre_onglet a {
background-color: var(--spip-color-gray-lighter);
text-decoration: none;
color: var(--spip-color-theme-dark);
}
.barre_onglet a:hover {
text-decoration: none;
background-color: var(--spip-color-theme-lighter);
}
.barre_onglet a:active {
text-decoration: none;
background-color: var(--spip-color-theme-light);
color: var(--spip-color-theme-darker);
}
/* Items exposés */
.barre_onglet strong,
.barre_onglet strong.on {
background-color: var(--spip-color-theme-dark);
color: var(--spip-color-white);
z-index: 1;
}
/* Icônes */
.barre_onglet .cadre-icone {
top: 50%;
#LEFT: var(--spip-tabs-spacing-x);
transform: translateY(-50%);
}
.barre_onglet .cadre-icone + a,
.barre_onglet .cadre-icone + strong {
padding-#LEFT: calc(24px + (var(--spip-tabs-spacing-x) * 2));
}
.barre_onglet li:first-child .cadre-icone {
#LEFT: calc(var(--spip-tabs-spacing-x) * 1.5); /* plus grand because arrondi */
}
.barre_onglet li:first-child .cadre-icone + a,
.barre_onglet li:first-child .cadre-icone + strong {
padding-#LEFT: calc(24px + (var(--spip-tabs-spacing-x) * 2.5)); /* plus grand because arrondi */
}