MediaWiki:Common.css: Difference between revisions

Revision as of 07:40, 21 December 2025

/* SK NavCell floating gamepad on mobile */
@media screen and (max-width: 759px) {

  /* keep the pad above Citizen UI and above the footer */
  body.sk-navpad-on .navcell-ui {
    position: fixed !important;

    /* lift it above phone browser bars */
    left: 50% !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 72px) !important;
    transform: translateX(-50%) !important;

    z-index: 2147483647 !important;

    margin: 0 !important;

    background: rgba(0, 0, 0, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 14px !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
  }

  /* stop page content from hiding behind the fixed pad */
  body.sk-navpad-on .navcell {
    padding-bottom: 220px !important;
  }

  /* optional hide mode */
  body.sk-navpad-off .navcell-ui {
    display: none !important;
  }
}

@@ Line 1: / Line 1: @@
-/* SK navigation cells */
+/* SK NavCell floating gamepad on mobile */
+@media screen and (max-width: 759px) {
-.navcell {
+   /* keep the pad above Citizen UI and above the footer */
-  margin: 1.5em 0;
+   body.sk-navpad-on .navcell-ui {
-   max-width: 380px;        /* slightly tighter column */
+    position: fixed !important;
-   margin-left: auto;
-  margin-right: auto;
-}
-/* 3×3 compass grid */
+    /* lift it above phone browser bars */
+    left: 50% !important;
+    bottom: calc(env(safe-area-inset-bottom, 0px) + 72px) !important;
+    transform: translateX(-50%) !important;
-.nav-grid {
+    z-index: 2147483647 !important;
-  display: grid;
-  grid-template-columns: 70px 70px 70px;   /* smaller directional buttons */
-  grid-template-rows: 70px 70px 70px;      /* smaller directional buttons */
-  gap: 8px;
-  justify-content: center;
-  margin: 1em 0;
-}
-.nav-btn {
+    margin: 0 !important;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  padding: 4px;                             /* smaller padding */
-  background: #222;
-  border: 1px solid #444;
-  border-radius: 6px;
-  font-size: 0.72em;                        /* slightly smaller font */
-  line-height: 1.15em;
-  text-decoration: none !important;
-  color: #eee !important;
-}
-.nav-btn:hover {
+    background: rgba(0, 0, 0, 0.85) !important;
-  background: #333;
+    border: 1px solid rgba(255, 255, 255, 0.10) !important;
-  border-color: #777;
+    border-radius: 14px !important;
-}
+    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
+  }
-.nav-empty {
+  /* stop page content from hiding behind the fixed pad */
-  background: transparent;
+  body.sk-navpad-on .navcell {
-   border: none;
+    padding-bottom: 220px !important;
-}
+   }
-/* Up / Down row */
+   /* optional hide mode */
+   body.sk-navpad-off .navcell-ui {
-.nav-vertical-row {
+    display: none !important;
-  display: flex;
+   }
-  justify-content: center;
-   gap: 10px;
-  margin: 0.6em 0 1.1em 0;
-}
-.nav-vertical {
-  min-width: 95px;        /* trimmed horizontally */
-   min-height: 38px;       /* visually balanced height */
-}
-/* Make link fill button */
-.nav-btn a {
-  text-decoration: none !important;
-  color: inherit !important;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-/* Center compass tile styling */
-.nav-center {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: transparent !important;
-  border: none !important;
-   padding: 0 !important;
-  margin: 0 !important;
-  width: 100%;
-  height: 100%;
-  pointer-events: none; /* ensure it's not clickable */
-}
-.nav-center img {
-  width: 90% !important;
-  height: auto !important;
-  object-fit: contain;
-  opacity: 1;
-}
-/* Remove hover effects for center */
-.nav-center:hover {
-  background: transparent !important;
-  border: none !important;
-  box-shadow: none !important;
 }