« Modèle:MinecraftConnect/styles.css » : différence entre les versions

Navigation interactive dans l’historique

Version du 10 novembre 2025 à 06:56

/* Modèle MinecraftConnect - Style discret */
.mc-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.mc-connect {
    text-decoration: underline;
    color: #0645ad;
}

.mc-connect:hover {
    color: #0b0080;
}

.mc-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 1px solid #a2a9b1;
    border-radius: 3px;
    background: #f8f9fa;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    transition: all 0.2s;
}

.mc-copy:hover {
    background: #eaecf0;
    border-color: #72777d;
}

.mc-copy:active {
    background: #c8ccd1;
}

.mc-copied {
    display: none;
    color: #14866d;
    font-weight: bold;
    font-size: 14px;
    animation: fadeInOut 2s;
}

.mc-copied.show {
    display: inline;
}

@keyframes fadeInOut {
    0%, 100% { opacity: 0; }
    10%, 90% { opacity: 1; }
}

/* Style mobile */
@media (max-width: 768px) {
    .mc-copy {
        width: 24px;
        height: 24px;
        font-size: 14px;
    }
}

@@ Ligne 1 : / Ligne 1 : @@
-/* Modèle MinecraftConnect */
+/* Modèle MinecraftConnect - Style discret */
-.minecraft-connect-wrapper {
+.mc-link {
      display: inline-flex;
      align-items: center;
-     gap: 8px;
+     gap: 4px;
-     position: relative;
+     white-space: nowrap;
 }
-.minecraft-connect-link {
+.mc-connect {
-    display: inline-flex;
+     text-decoration: underline;
-    align-items: center;
+     color: #0645ad;
-    padding: 8px 16px;
-    background: linear-gradient(135deg, #3a8c3e 0%, #2d6b30 100%);
-    color: white !important;
-     text-decoration: none !important;
-     border-radius: 6px;
-    font-weight: 600;
-    font-size: 14px;
-    transition: all 0.3s ease;
-    border: 2px solid #2d6b30;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
 }
-.minecraft-connect-link:hover {
+.mc-connect:hover {
-     background: linear-gradient(135deg, #4aa44e 0%, #3a8c3e 100%);
+     color: #0b0080;
-    transform: translateY(-2px);
-    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
-    border-color: #4aa44e;
 }
-.minecraft-connect-link:active {
+.mc-copy {
-     transform: translateY(0);
+     display: inline-flex;
-     box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+     align-items: center;
-}
+    justify-content: center;
+    width: 20px;
-.minecraft-copy-btn {
+     height: 20px;
-     padding: 8px 12px;
+     padding: 0;
-     background: #ffffff;
+     border: 1px solid #a2a9b1;
-     border: 2px solid #ddd;
+     border-radius: 3px;
-     border-radius: 6px;
+    background: #f8f9fa;
      cursor: pointer;
-     font-size: 16px;
+     font-size: 12px;
-     transition: all 0.3s ease;
+     line-height: 1;
-     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+     transition: all 0.2s;
 }
-.minecraft-copy-btn:hover {
+.mc-copy:hover {
-     background: #f0f0f0;
+     background: #eaecf0;
-     border-color: #3a8c3e;
+     border-color: #72777d;
-    transform: scale(1.1);
 }
-.minecraft-copy-btn:active {
+.mc-copy:active {
-     transform: scale(0.95);
+     background: #c8ccd1;
 }
-.minecraft-copied-msg {
+.mc-copied {
-     position: absolute;
+     display: none;
-     right: -80px;
+     color: #14866d;
-    background: #2d6b30;
+     font-weight: bold;
-     color: white;
+     font-size: 14px;
-    padding: 6px 12px;
+     animation: fadeInOut 2s;
-    border-radius: 6px;
-     font-size: 13px;
-    font-weight: 600;
-     opacity: 0;
-    pointer-events: none;
-    transition: opacity 0.3s ease;
-    white-space: nowrap;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
-}
-.minecraft-copied-msg.show {
-    opacity: 1;
 }
-/* Animation de feedback */
+.mc-copied.show {
-@keyframes copySuccess {
+     display: inline;
-%, 100% { transform: scale(1); }
-% { transform: scale(1.2); }
 }
-.minecraft-copy-btn.copied {
+@keyframes fadeInOut {
-     animation: copySuccess 0.3s ease;
+%, 100% { opacity: 0; }
-     background: #4aa44e;
+%, 90% { opacity: 1; }
-    border-color: #3a8c3e;
 }
-/* Responsive */
+/* Style mobile */
 @media (max-width: 768px) {
-     .minecraft-connect-wrapper {
+     .mc-copy {
-        flex-direction: column;
+         width: 24px;
-        align-items: stretch;
+         height: 24px;
-        gap: 6px;
+         font-size: 14px;
-    }
-    .minecraft-copied-msg {
-         position: static;
-         margin-top: 4px;
-         text-align: center;
      }
 }