improve social media in header

2025-04-09 07:26:06 +04:00
parent 0b60f03c57
commit a5c13207c1
2 changed files with 64 additions and 3 deletions
@@ -786,4 +786,54 @@ img {
    .video-title {
        font-size: 16px;
    }
+}
+
+/* Styles pour le menu dropdown des réseaux sociaux */
+.more-social-container {
+    position: relative;
+}
+
+.more-social-dropdown {
+    position: absolute;
+    top: 100%;
+    right: 0;
+    width: 180px;
+    background-color: var(--main-bg);
+    border-radius: 4px;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
+    padding: 10px 0;
+    display: none;
+    z-index: 100;
+}
+
+.more-social-container:hover .more-social-dropdown,
+.more-social-toggle:focus + .more-social-dropdown,
+.more-social-dropdown:hover {
+    display: block;
+}
+
+.more-social-item {
+    display: flex;
+    align-items: center;
+    padding: 10px 15px;
+    font-size: 14px;
+    transition: background-color 0.2s;
+}
+
+.more-social-item:hover {
+    background-color: rgba(0,0,0,0.05);
+}
+
+.more-social-item i {
+    margin-right: 10px;
+    font-size: 18px;
+    color: var(--primary-red);
+    width: 20px;
+    text-align: center;
+}
+
+@media (max-width: 1000px) {
+    .more-social-dropdown {
+        right: -15px;
+    }
 }