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

Navigation interactive dans l’historique

← Modification précédente Modification suivante →

@@ Ligne 1 : / Ligne 1 : @@
-/* Modèle MinecraftConnect - Style discret */
+/* Conteneur du bouton */
-.mc-link {
+.mc-connect-wrapper {
-     display: inline-flex;
+    position: relative;
-     align-items: center;
+    min-height: 80px;
-     gap: 4px;
+    width: 300px;
-     white-space: nowrap;
+    border-radius: 12px;
+    overflow: visible;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    background: #62b47a; /* Couleur Minecraft par défaut */
+}
+/* Bouton principal */
+.mc-connect-btn {
+     width: 100%;
+    height: 100%;
+    min-height: 80px;
+     border: none;
+    border-radius: 12px;
+     cursor: pointer;
+     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    background: transparent;
+    padding: 0;
 }
-.mc-connect {
+.mc-connect-btn:hover {
-     text-decoration: underline;
+     transform: translateY(-2px);
-     color: #0645ad;
+     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
 }
-.mc-connect:hover {
+.mc-connect-btn:active {
-     color: #0b0080;
+     transform: translateY(0);
 }
-.mc-copy {
+/* Contenu du bouton */
-     display: inline-flex;
+.mc-connect-content {
+     display: flex;
+    flex-direction: column;
      align-items: center;
      justify-content: center;
-     width: 20px;
+     gap: 8px;
-    height: 20px;
+     padding: 1rem;
-     padding: 0;
+     color: white;
-     border: 1px solid #a2a9b1;
+}
-    border-radius: 3px;
-    background: #f8f9fa;
+.mc-connect-content img {
-    cursor: pointer;
+     filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
-    font-size: 12px;
-    line-height: 1;
-     transition: all 0.2s;
 }
-.mc-copy:hover {
+/* Message de confirmation */
-     background: #eaecf0;
+.mc-connect-feedback {
-     border-color: #72777d;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+     background: rgba(20, 134, 109, 0.95);
+    color: white;
+    padding: 8px 16px;
+     border-radius: 8px;
+    font-weight: bold;
+    font-size: 14px;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
 }
-.mc-copy:active {
+.mc-connect-feedback.show {
-     background: #c8ccd1;
+     opacity: 1;
 }
-.mc-copied {
+/* Couleurs prédéfinies */
-    display: none;
+.mc-connect--minecraft { background: #62b47a; }
-    color: #14866d;
+.mc-connect--primary { background: #007bff; }
-    font-weight: bold;
+.mc-connect--success { background: #28a745; }
-     font-size: 14px;
+.mc-connect--danger { background: #dc3545; }
-     animation: fadeInOut 2s;
+.mc-connect--warning { background: #ffc107; color: #000 !important; }
+.mc-connect--info { background: #17a2b8; }
+.mc-connect--dark { background: #343a40; }
+/* Alignements */
+.mc-connect--align-left {
+     margin-right: auto;
+     margin-left: 0;
 }
-.mc-copied.show {
+.mc-connect--align-center {
-     display: inline;
+     margin-left: auto;
+    margin-right: auto;
 }
-@keyframes fadeInOut {
+.mc-connect--align-right {
-%, 100% { opacity: 0; }
+     margin-left: auto;
-%, 90% { opacity: 1; }
+     margin-right: 0;
 }
-/* Style mobile */
+/* Mobile */
 @media (max-width: 768px) {
-     .mc-copy {
+     .mc-connect-wrapper {
-         width: 24px;
+         width: 100%;
-        height: 24px;
-        font-size: 14px;
      }
 }