/* =======================================================
Styles Globaux pour l'Espace Client (Contenu Réseaux)
======================================================= */
.cr-publications-group, .cr-frontend-form {
max-width: 100%;
margin: 0 auto;
}
.cr-publication {
padding: 10px;
border-bottom: 1px solid #ddd;
}
.filter-group {
margin-bottom: 10px;
}
.notice.success {
background: #d4edda;
color: #155724;
padding: 10px;
border: 1px solid #c3e6cb;
}
.notice.probleme {
background: #d4edda;
color: red;
padding: 10px;
border: 1px solid #c3e6cb;
}
.notice.succes_contenu {
background: #d4edda;
color: blue;
padding: 10px;
border: 1px solid #c3e6cb;
}
.cr-frontend-form {
background-color: #ffffff;
border: 1px solid #ddd;
padding: 20px;
margin-bottom: 30px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.cr-frontend-list1 {
background-color: #ffffff;
border: 1px solid #ddd;
padding: 20px;
margin-bottom: 30px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.cr-frontend-list ul {
margin: 0 0 15px 0px;
}
.cr-frontend-form h2,
.cr-frontend-list h2 {
color: #003366;
margin-bottom: 20px;
font-size: 14px;
}
/* =======================================================
Styles des Étiquettes, Champs et Boutons
======================================================= */
.cr-frontend-form label {
font-weight: bold;
color: #333333;
margin-bottom: 5px;
display: block;
}
.cr-frontend-form input[type="text"],
.cr-frontend-form textarea,
.cr-frontend-form select {
width: 100%;
padding: 10px;
border: 1px solid #cccccc;
border-radius: 3px;
margin-bottom: 15px;
transition: border-color 0.3s;
}
.cr-frontend-form input[type="text"]:focus,
.cr-frontend-form textarea:focus,
.cr-frontend-form select:focus {
border-color: #003366;
outline: none;
}
/* =======================================================
Boutons et Liens
======================================================= */
.cr-frontend-form .button,
.cr-frontend-list .button {
background-color: #013340;
color: #ffffff;
border: none;
padding: 10px 20px;
border-radius: 20px;
cursor: pointer;
transition: background-color 0.3s, transform 0.2s;
text-decoration: none;
display: inline-block;
}
.cr-frontend-form .button:hover,
.cr-frontend-list .button:hover {
background-color: #ff6600;
transform: translateY(-1px);
}
.cr-frontend-list a {
color: #003366;
text-decoration: none;
}
.cr-frontend-list a:hover {
text-decoration: underline;
}
/* Bouton de sélection média */
.cr-frontend-form a.button.cr-media-upload {
margin-top: 5px;
background-color: #ff6600;
color: #ffffff;
padding: 6px 12px;
border-radius: 3px;
text-decoration: none;
transition: background-color 0.3s;
}
.cr-frontend-form a.button.cr-media-upload:hover {
background-color: #003366;
}
/* =======================================================
Messages d'Information et d'Erreur
======================================================= */
.cr-frontend-form .notice {
padding: 10px;
border-radius: 3px;
margin-bottom: 15px;
font-size: 14px;
}
.cr-frontend-form .notice.success {
background-color: #e6ffed;
border: 1px solid #00cc66;
color: #006644;
}
.cr-frontend-form .notice.error {
background-color: #ffe6e6;
border: 1px solid #ff4d4d;
color: #cc0000;
}
.cr-publications-group {
border: 1px solid #ddd;
padding: 15px;
margin-bottom: 20px;
background-color: #f9f9f9;
}
/* =======================================================
Styles Responsive pour une Meilleure Mise en Page
======================================================= */
@media (min-width: 768px) {
.cr-frontend-form p {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.cr-frontend-form p label {
width: 30%;
margin-right: 10px;
}
.cr-frontend-form p input[type="text"],
.cr-frontend-form p textarea,
.cr-frontend-form p select {
width: 95%;
}
.cr-frontend-list ul {
max-height: 1800px;
overflow-y: auto;
}
.cr-frontend-list span {
font-size:14px;
}
}
@media only screen and (max-width: 768px) {
.cr-frontend-form p {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.cr-frontend-form p label {
width: 100%;
margin-right: 10px;
}
.cr-frontend-form p input[type="text"],
.cr-frontend-form p textarea,
.cr-frontend-form p select {
width: 100%;
}
.cr-frontend-list ul {
max-height: 300px;
overflow-y: auto;
}
.cr-edit-buttons {
width: 100%;
text-align: center;
}
.cr-frontend-list span {
font-size:12px;
}
}
/* CSS pour les toggle switches */
/* Style pour les toggle switches */
.cr-social-networks {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin: 20px 0;
}
.cr-social-network-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 15px;
background: #f5f5f5;
border-radius: 25px;
transition: all 0.3s ease;
}
.cr-social-network-item.active {
background: #e8f0fe;
}
.cr-social-network-item label {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
user-select: none;
margin: 0;
}
/* Toggle Switch */
.cr-toggle-switch {
position: relative;
display: inline-block;
width: 44px;
height: 24px;
}
.cr-toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.cr-toggle-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
border-radius: 24px;
}
.cr-toggle-slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background-color: white;
transition: .4s;
border-radius: 50%;
}
input:checked + .cr-toggle-slider {
background-color: #2196F3;
}
input:checked + .cr-toggle-slider.facebook {
background-color: #1877f2;
}
input:checked + .cr-toggle-slider.instagram {
background-color: #E4405F;
}
input:checked + .cr-toggle-slider.linkedin {
background-color: #0077b5;
}
input:focus + .cr-toggle-slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .cr-toggle-slider:before {
transform: translateX(20px);
}
/* Icônes des réseaux sociaux */
.cr-social-icon.facebook {
background-image: url('data:image/svg+xml;utf8,');
}
.cr-social-icon.instagram {
background-image: url('data:image/svg+xml;utf8,');
}
.cr-social-icon.linkedin {
background-image: url('data:image/svg+xml;utf8,');
}
.cr-social-icon.bluesky {
background-image: url('data:image/svg+xml;utf8,');
}
.cr-social-icon.google {
background-image: url('data:image/svg+xml;utf8,');
}
.cr-social-icon.pinterest {
background-image: url('data:image/svg+xml;utf8,');
}
.cr-social-icon.reddit {
background-image: url('data:image/svg+xml;utf8,');
}
.cr-social-icon.snapchat {
background-image: url('data:image/svg+xml;utf8,');
}
.cr-social-icon.telegram {
background-image: url('data:image/svg+xml;utf8,');
}
.cr-social-icon.threads {
background-image: url('data:image/svg+xml;utf8,');
}
.cr-social-icon.tiktok {
background-image: url('data:image/svg+xml;utf8,');
}
.cr-social-icon.twitter {
background-image: url('data:image/svg+xml;utf8,');
}
.cr-social-icon.youtube {
background-image: url('data:image/svg+xml;utf8,');
}
/* Style de base pour tous les icônes */
.cr-social-icon {
display: inline-block;
width: 20px;
height: 20px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
margin-right: 8px;
vertical-align: middle;
}
.cr-social-network-name {
font-weight: 500;
color: #333;
}
/* Pour les écrans mobiles */
@media (max-width: 768px) {
.cr-social-networks {
flex-direction: column;
}
.cr-social-network-item {
width: 100%;
justify-content: space-between;
}
}
input[type="date"], input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="url"], select, textarea, .woocommerce .quantity input.qty, .wp-block-search input[type="search"], .dark input[type="email"], .dark input[type="password"], .dark input[type="tel"], .dark input[type="text"], .dark select, .dark textarea
Specificity: (0,1,1)
{
color: #626262;
background-color: #fff;
}