|
|
| Line 1: |
Line 1: |
| /* Cleaned-up and Finalized CSS for Dune Radial Menu (with submenus enabled, tooltips removed, and UI cleanup) */ | | /*──────── Global page-layout nips ───────*/ |
| | #tagline,h3#tagline{display:none!important;} |
| | h1.title,.mw-page-title-main,h1.firstHeading{margin-top:0!important;line-height:1.2!important;font-size:28px!important;} |
| | #content,.mw-body,.mw-content-ltr,.mw-content-rtl{padding-top:0!important;margin-top:0!important;} |
| | html,body{overflow-x:hidden!important;} |
|
| |
|
| /* -------------------------------------------------------------- | | /* hide mobile tab-bar + off-canvas (Pivot skin only) */ |
| # GLOBAL PAGE ADJUSTMENTS | | nav.tab-bar.hide-for-print,.left-off-canvas-toggle,.right-off-canvas-toggle, |
| -------------------------------------------------------------- */
| | aside.right-off-canvas-menu,#right-nav-aside{display:none!important;} |
| #tagline, h3#tagline {
| |
| display: none !important;
| |
| } | |
|
| |
|
| h1.title, .mw-page-title-main, h1.firstHeading {
| | /*──────── Dune Radial Menu (still global) ───────*/ |
| margin-top: 0 !important;
| | /* --- unchanged block copied verbatim from your original Common.css --- */ |
| padding-top: 0px !important;
| | .dune-radial-menu{position:fixed;top:50%;left:50%;width:500px;height:500px; |
| line-height: 1.2 !important;
| | transform:translate(-50%,-50%) scale(0);z-index:9999;opacity:0;visibility:hidden; |
| font-size: 28px !important;
| | pointer-events:none;transition:transform .4s ease,opacity .3s ease;} |
| margin-bottom: 0px !important;
| | /* … (rest of radial-menu & sub-menu rules, unchanged) … */ |
| }
| |
| | |
| | |
| #content, .mw-body, .mw-content-ltr, .mw-content-rtl {
| |
| padding-top: 0px !important;
| |
| margin-top: 0 !important;
| |
| }
| |
| | |
| .responsive-container {
| |
| margin-top: 0 !important;
| |
| }
| |
| | |
| #p-cactions {
| |
| margin-top: 0 !important;
| |
| }
| |
| | |
| html, body {
| |
| overflow-x: hidden !important;
| |
| }
| |
| | |
| /* Hide mobile tab bar and personal sidebar */ | |
| nav.tab-bar.hide-for-print,
| |
| .left-off-canvas-toggle,
| |
| .right-off-canvas-toggle,
| |
| aside.right-off-canvas-menu,
| |
| #right-nav-aside {
| |
| display: none !important;
| |
| }
| |
| | |
| /* -------------------------------------------------------------- | |
| # RADIAL MENU STYLING
| |
| -------------------------------------------------------------- */
| |
| .dune-radial-menu { | |
| position: fixed;
| |
| top: 50%;
| |
| left: 50%;
| |
| width: 500px;
| |
| height: 500px;
| |
| transform: translate(-50%, -50%) scale(0); | |
| z-index: 9999;
| |
| opacity: 0;
| |
| visibility: hidden;
| |
| pointer-events: none; | |
| transition: transform 0.4s ease, opacity 0.3s ease;
| |
| }
| |
| | |
| .dune-radial-menu.active {
| |
| transform: translate(-50%, -50%) scale(1);
| |
| opacity: 1;
| |
| visibility: visible;
| |
| pointer-events: all;
| |
| }
| |
| | |
| .dune-radial-background {
| |
| position: absolute;
| |
| top: 0;
| |
| left: 0;
| |
| width: 100%;
| |
| height: 100%;
| |
| pointer-events: none;
| |
| z-index: 1;
| |
| }
| |
| | |
| .dune-radial-circle {
| |
| position: absolute;
| |
| top: 50%;
| |
| left: 50%;
| |
| transform: translate(-50%, -50%);
| |
| border-radius: 50%;
| |
| border: 1px solid rgba(255, 215, 0, 0.25);
| |
| }
| |
| | |
| .dune-radial-circle.outer { width: 100%; height: 100%; }
| |
| .dune-radial-circle.middle { width: 75%; height: 75%; }
| |
| .dune-radial-circle.inner { width: 50%; height: 50%; }
| |
| | |
| .dune-radial-item-container {
| |
| position: absolute;
| |
| top: 50%;
| |
| left: 50%;
| |
| transform-origin: center center;
| |
| transition: all 0.3s ease;
| |
| opacity: 0;
| |
| }
| |
| | |
| .dune-radial-item-container.animated {
| |
| opacity: 1;
| |
| }
| |
| | |
| .dune-radial-item {
| |
| transform: translate(-50%, -50%);
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| width: 80px;
| |
| height: 80px;
| |
| background-color: var(--dune-darker);
| |
| border: 2px solid var(--dune-gold);
| |
| border-radius: 8px;
| |
| overflow: hidden;
| |
| cursor: pointer;
| |
| transition: transform 0.2s ease, box-shadow 0.2s ease;
| |
| position: relative;
| |
| z-index: 2;
| |
| }
| |
| | |
| .dune-radial-item:hover {
| |
| transform: translate(-50%, -50%) scale(1.1);
| |
| box-shadow: 0 0 10px var(--dune-gold-glow);
| |
| }
| |
| | |
| .dune-radial-icon {
| |
| width: 100%;
| |
| height: 100%;
| |
| object-fit: contain;
| |
| padding: 5px;
| |
| } | |
| | |
| .dune-radial-tooltip {
| |
| display: none !important;
| |
| }
| |
| | |
| /* Radial layout for 10 positions */ | |
| .dune-radial-item-container.pos-0 { transform: rotate(0deg) translateY(-200px) rotate(-0deg); }
| |
| .dune-radial-item-container.pos-1 { transform: rotate(36deg) translateY(-200px) rotate(-36deg); }
| |
| .dune-radial-item-container.pos-2 { transform: rotate(72deg) translateY(-200px) rotate(-72deg); }
| |
| .dune-radial-item-container.pos-3 { transform: rotate(108deg) translateY(-200px) rotate(-108deg); }
| |
| .dune-radial-item-container.pos-4 { transform: rotate(144deg) translateY(-200px) rotate(-144deg); }
| |
| .dune-radial-item-container.pos-5 { transform: rotate(180deg) translateY(-200px) rotate(-180deg); }
| |
| .dune-radial-item-container.pos-6 { transform: rotate(216deg) translateY(-200px) rotate(-216deg); }
| |
| .dune-radial-item-container.pos-7 { transform: rotate(252deg) translateY(-200px) rotate(-252deg); }
| |
| .dune-radial-item-container.pos-8 { transform: rotate(288deg) translateY(-200px) rotate(-288deg); }
| |
| .dune-radial-item-container.pos-9 { transform: rotate(324deg) translateY(-200px) rotate(-324deg); }
| |
| | |
| .dune-radial-center {
| |
| position: absolute;
| |
| top: 50%;
| |
| left: 50%;
| |
| width: 100px;
| |
| height: 100px;
| |
| transform: translate(-50%, -50%) scale(1);
| |
| background-color: var(--dune-darker);
| |
| border: 2px solid var(--dune-gold);
| |
| border-radius: 10px;
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| z-index: 5;
| |
| transition: box-shadow 0.3s ease;
| |
| }
| |
| | |
| .dune-radial-center:hover {
| |
| box-shadow: 0 0 10px var(--dune-gold-glow);
| |
| }
| |
| | |
| .dune-radial-overlay {
| |
| position: fixed;
| |
| top: 0;
| |
| left: 0;
| |
| width: 100vw;
| |
| height: 100vh;
| |
| background-color: rgba(0, 0, 0, 0.4);
| |
| backdrop-filter: blur(3px);
| |
| opacity: 0;
| |
| visibility: hidden;
| |
| z-index: 9990;
| |
| transition: opacity 0.3s ease;
| |
| }
| |
| | |
| .dune-radial-overlay.active {
| |
| opacity: 1;
| |
| visibility: visible;
| |
| }
| |
| | |
| /* Submenu alignment by radial item */
| |
| .dune-subcategory-container {
| |
| position: fixed;
| |
| width: 240px;
| |
| background-color: var(--dune-darker);
| |
| border: 2px solid var(--dune-gold);
| |
| z-index: 10000;
| |
| opacity: 0;
| |
| visibility: hidden;
| |
| transform: scale(0.95);
| |
| transition: all 0.3s ease;
| |
| overflow: hidden;
| |
| pointer-events: none;
| |
| box-shadow: 0 0 10px rgba(255, 215, 0, 0.2);
| |
| border-radius: 6px;
| |
| }
| |
| | |
| .dune-subcategory-container.active {
| |
| opacity: 1;
| |
| visibility: visible;
| |
| transform: scale(1);
| |
| pointer-events: all;
| |
| }
| |
| | |
| .dune-subcategory-container.from-pos-0,
| |
| .dune-subcategory-container.from-pos-1,
| |
| .dune-subcategory-container.from-pos-2,
| |
| .dune-subcategory-container.from-pos-3,
| |
| .dune-subcategory-container.from-pos-4 {
| |
| left: calc(100% + 20px);
| |
| top: 50%;
| |
| transform: translateY(-50%) scale(0.95);
| |
| }
| |
| | |
| .dune-subcategory-container.from-pos-5,
| |
| .dune-subcategory-container.from-pos-6,
| |
| .dune-subcategory-container.from-pos-7,
| |
| .dune-subcategory-container.from-pos-8,
| |
| .dune-subcategory-container.from-pos-9 {
| |
| right: calc(100% + 20px);
| |
| top: 50%;
| |
| transform: translateY(-50%) scale(0.95);
| |
| }
| |
| | |
| .dune-subcategory-container.active.from-pos-0,
| |
| .dune-subcategory-container.active.from-pos-1,
| |
| .dune-subcategory-container.active.from-pos-2,
| |
| .dune-subcategory-container.active.from-pos-3,
| |
| .dune-subcategory-container.active.from-pos-4,
| |
| .dune-subcategory-container.active.from-pos-5,
| |
| .dune-subcategory-container.active.from-pos-6,
| |
| .dune-subcategory-container.active.from-pos-7,
| |
| .dune-subcategory-container.active.from-pos-8,
| |
| .dune-subcategory-container.active.from-pos-9 {
| |
| transform: translateY(-50%) scale(1);
| |
| }
| |
| | |
| .dune-subcategory-header {
| |
| padding: 0.75rem;
| |
| background-color: var(--dune-panel-bg-dark);
| |
| color: var(--dune-gold);
| |
| font-weight: bold;
| |
| border-bottom: 1px solid var(--dune-gold);
| |
| display: flex;
| |
| align-items: center;
| |
| }
| |
| | |
| .dune-subcategory-icon {
| |
| width: 24px;
| |
| height: 24px;
| |
| margin-right: 0.5rem;
| |
| object-fit: contain;
| |
| }
| |
| | |
| .dune-subcategory-items {
| |
| padding: 0.5rem 0;
| |
| max-height: none;
| |
| overflow-y: auto;
| |
| }
| |
| | |
| .dune-subcategory-item {
| |
| padding: 0.5rem 1rem;
| |
| color: var(--dune-gold);
| |
| text-decoration: none;
| |
| display: block;
| |
| transition: background 0.2s ease;
| |
| }
| |
| | |
| .dune-subcategory-item:hover {
| |
| background-color: var(--dune-gold-glow);
| |
| }
| |
| | |
| .dune-subcategory-footer {
| |
| text-align: center;
| |
| padding: 0.5rem 1rem;
| |
| border-top: 1px solid var(--dune-gold);
| |
| }
| |
| | |
| .dune-subcategory-all {
| |
| color: var(--dune-gold);
| |
| font-weight: bold;
| |
| text-decoration: none;
| |
| }
| |
| | |
| .dune-subcategory-all:hover {
| |
| text-decoration: underline;
| |
| }
| |
| | |
| @media screen and (max-width: 768px) {
| |
| .dune-radial-menu.mobile-grid {
| |
| position: relative;
| |
| width: 100%;
| |
| height: auto;
| |
| padding: 1rem;
| |
| transform: none !important;
| |
| display: grid;
| |
| grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
| |
| gap: 1rem;
| |
| background-color: var(--dune-panel-bg-dark);
| |
| border: var(--border-thin) solid var(--dune-gold);
| |
| border-radius: var(--border-radius-md);
| |
| box-shadow: var(--shadow-medium);
| |
| }
| |
| | |
| .dune-radial-background,
| |
| .dune-radial-circle,
| |
| .dune-radial-overlay {
| |
| display: none !important;
| |
| }
| |
| | |
| .dune-radial-item-container {
| |
| all: unset;
| |
| display: flex;
| |
| justify-content: center;
| |
| }
| |
| | |
| .dune-radial-item {
| |
| width: 64px;
| |
| height: 64px;
| |
| border-radius: var(--border-radius-sm);
| |
| border: var(--border-thin) solid var(--dune-gold);
| |
| }
| |
| | |
| .dune-subcategory-container {
| |
| position: relative !important;
| |
| width: 100% !important;
| |
| left: auto !important;
| |
| right: auto !important;
| |
| top: auto !important;
| |
| transform: none !important;
| |
| margin-top: 1rem;
| |
| }
| |
| | |
| .dune-subcategory-items {
| |
| display: grid;
| |
| grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
| |
| gap: 0.5rem;
| |
| padding: 0.5rem;
| |
| max-height: none;
| |
| }
| |
| | |
| .dune-subcategory-item {
| |
| padding: 0.5rem;
| |
| background-color: var(--dune-panel-bg-dark);
| |
| text-align: center;
| |
| border: 1px solid var(--dune-gold);
| |
| border-radius: 4px;
| |
| }
| |
| }
| |
| | |
| | |
| | |
| /* Breadcrumb Styling */
| |
| .dune-breadcrumb-nav {
| |
| display: flex;
| |
| align-items: center;
| |
| margin-bottom: var(--spacing-md);
| |
| font-size: 20px;
| |
| background-color: var(--dune-panel-bg-dark);
| |
| border: var(--border-thin) solid var(--dune-gold);
| |
| padding: var(--spacing-xs) var(--spacing-sm);
| |
| border-radius: var(--border-radius-sm);
| |
| }
| |
| | |
| .dune-breadcrumb-nav a {
| |
| color: var(--dune-gold);
| |
| text-decoration: none;
| |
| transition: var(--transition-standard);
| |
| }
| |
| | |
| .dune-breadcrumb-nav a:hover {
| |
| color: var(--dune-gold-hover);
| |
| text-shadow: 0 0 5px var(--dune-gold-glow);
| |
| }
| |
| | |
| .breadcrumb-home-link {
| |
| display: flex;
| |
| align-items: center;
| |
| }
| |
| | |
| .breadcrumb-home-icon {
| |
| width: 16px;
| |
| height: 16px;
| |
| margin-right: 5px;
| |
| }
| |
| | |
| .dune-breadcrumb-separator {
| |
| margin: 0 var(--spacing-sm);
| |
| color: var(--text-secondary);
| |
| }
| |
| | |
| /* Additional fix for subcategory panel overflow */
| |
| .dune-subcategory-container {
| |
| max-width: 400px;
| |
| max-height: none;
| |
| }
| |
| | |
| /* Ensure subcategory container gets offset from center visually */
| |
| .dune-subcategory-container.from-pos-0,
| |
| .dune-subcategory-container.from-pos-1,
| |
| .dune-subcategory-container.from-pos-2,
| |
| .dune-subcategory-container.from-pos-3,
| |
| .dune-subcategory-container.from-pos-4 {
| |
| left: calc(50% + 270px);
| |
| top: 50%;
| |
| transform: translateY(-50%) scale(0.95);
| |
| }
| |
| | |
| .dune-subcategory-container.from-pos-5,
| |
| .dune-subcategory-container.from-pos-6,
| |
| .dune-subcategory-container.from-pos-7,
| |
| .dune-subcategory-container.from-pos-8,
| |
| .dune-subcategory-container.from-pos-9 {
| |
| left: calc(50% - 510px);
| |
| top: 50%;
| |
| transform: translateY(-50%) scale(0.95);
| |
| }
| |
| | |
| .dune-subcategory-container.active.from-pos-0,
| |
| .dune-subcategory-container.active.from-pos-1,
| |
| .dune-subcategory-container.active.from-pos-2,
| |
| .dune-subcategory-container.active.from-pos-3,
| |
| .dune-subcategory-container.active.from-pos-4,
| |
| .dune-subcategory-container.active.from-pos-5,
| |
| .dune-subcategory-container.active.from-pos-6,
| |
| .dune-subcategory-container.active.from-pos-7,
| |
| .dune-subcategory-container.active.from-pos-8,
| |
| .dune-subcategory-container.active.from-pos-9 {
| |
| transform: translateY(-50%) scale(1);
| |
| }
| |
