User:SandWafer/vector.css

/* Enhanced Liquid Glass Floating Menu - Vector Legacy 2010 */
.floating-menu {
  position: fixed;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 1rem;
  border-radius: 1.5rem;
  cursor: move;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2); /* Safari support */
  isolation: isolate;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.floating-menu:hover {
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.2);
  transform: translateY(-50%) scale(1.02);
}

.floating-menu .menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  color: black;
  padding: 10px 12px;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.3);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.floating-menu .menu-item:hover {
  background: rgba(255, 255, 255, 0.5);
  transform: translateX(-2px);
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.2);
}

.floating-menu .menu-item:active {
  transform: translateX(-1px) scale(0.98);
}

.floating-menu .toggle-btn {
  background: rgba(255, 255, 255, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
  justify-content: center;
}

.floating-menu .toggle-btn:hover {
  background: rgba(255, 255, 255, 0.6) !important;
}

/* Material Icons Enhanced */
.material-icons {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: normal;
  font-size: 20px;
  vertical-align: middle;
  transition: transform 0.2s ease;
}

.menu-item:hover .material-icons {
  transform: scale(1.1);
}

.label {
  font-weight: 500;
  white-space: nowrap;
}

/* Enhanced Status Bar */
.status-bar {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9998;
  padding: 8px 16px;
  border-radius: 1rem;
  font-size: 14px;
  font-family: 'Segoe UI', sans-serif;
  font-weight: 500;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 
    0 4px 20px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Vector Legacy 2010 Specific Adaptations */
/* Read Mode Enhancements for Legacy Layout */
body.read-mode #column-content {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.read-mode #content {
  max-width: none !important;
  margin-left: 0 !important;
  padding: 2rem;
}

body.read-mode #column-one {
  display: none !important;
}

body.read-mode #footer {
  margin-left: 0 !important;
}

/* Legacy Wikipedia elements transitions */
#column-one, #p-cactions, #p-personal, #p-logo, #footer {
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Legacy sidebar styling */
#column-one .portlet {
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Dark theme adaptations */
@media (prefers-color-scheme: dark) {
  .floating-menu {
    background: rgba(255, 255, 255, 0.15);
  }
  
  .floating-menu .menu-item {
    background: rgba(255, 255, 255, 0.2);
    color: white;
  }
  
  .floating-menu .menu-item:hover {
    background: rgba(255, 255, 255, 0.3);
  }
}

/* Responsive design for legacy layout */
@media (max-width: 768px) {
  .floating-menu {
    right: 10px;
    padding: 0.75rem;
    gap: 6px;
  }
  
  .floating-menu .menu-item {
    padding: 8px 10px;
    font-size: 14px;
  }
  
  .material-icons {
    font-size: 18px;
  }
  
  .status-bar {
    right: 10px;
    bottom: 10px;
    font-size: 12px;
    padding: 6px 12px;
  }
}

/* Legacy browser compatibility */
.floating-menu {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
  filter: alpha(opacity=90);
}

/* IE8 and below fallbacks */
.ie8 .floating-menu,
.ie7 .floating-menu,
.ie6 .floating-menu {
  background: #f0f0f0;
  border: 1px solid #ccc;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

Content Disclaimer

Informasi ini disarikan dari Wikipedia dan disajikan kembali untuk tujuan edukasi. Konten tersedia di bawah lisensi CC BY-SA 3.0. Kami tidak bertanggung jawab atas ketidakakuratan data yang bersumber dari kontribusi publik tersebut.

  1. The information displayed on this website is sourced in part or in whole from Wikipedia and has been adapted for the purpose of restating it. We strive to provide accurate and relevant information, however:
  2. There is no guarantee of absolute accuracy. Wikipedia is an open, collaborative project that can be edited by anyone, so information is subject to change.
  3. It is not intended to constitute professional advice. The content displayed is for informational and educational purposes only. For important decisions (e.g., medical, legal, or financial), please consult a professional.
  4. Content copyright. Wikipedia is licensed under the Creative Commons Attribution-ShareAlike License (CC BY-SA). This means that content may be reused with appropriate attribution and shared under a similar license.
  5. Responsible use. Any risk arising from the use of information from this website is entirely the responsibility of the user.