Template:NavCell/styles.css: Difference between revisions

Revision as of 16:31, 20 December 2025

.navcell {
  max-width: 100%;
  padding: 8px;
}

.navcell-ui {
  position: fixed;
  bottom: 12px;
  left: 12px;
  z-index: 999;
  background: rgba(0,0,0,0.6);
  padding: 8px;
  border-radius: 10px;
}

.nav-grid {
  display: grid;
  grid-template-columns: 56px 56px 56px;
  grid-template-rows: 56px 56px 56px;
  gap: 6px;
}

.nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2a2a2a;
  border-radius: 8px;
  font-size: 13px;
  text-align: center;
}

.nav-btn a {
  color: #eee;
  text-decoration: none;
}

.nav-center {
  background: transparent;
}

.nav-ud {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
}

.nav-ud .nav-btn {
  width: 56px;
}

.nav-text {
  margin-top: 160px;
}

.nav-desc {
  font-size: 14px;
  line-height: 1.25;
  margin-bottom: 6px;
}

.nav-nearby {
  font-size: 13px;
  opacity: 0.85;
}

@@ Line 1: / Line 1: @@
-/* Base */
 .navcell {
-   width: 100%;
+   max-width: 100%;
-   max-width: 980px;
+   padding: 8px;
-  margin: 0 auto;
-  box-sizing: border-box;
 }
-.navcell-top {
+.navcell-ui {
-   width: 100%;
+   position: fixed;
-   box-sizing: border-box;
+   bottom: 12px;
+  left: 12px;
+  z-index: 999;
+  background: rgba(0,0,0,0.6);
+  padding: 8px;
+  border-radius: 10px;
 }
-/* Text blocks: tighter, smaller, no weird wrapping */
+.nav-grid {
+   display: grid;
-.navcell-desc,
+   grid-template-columns: 56px 56px 56px;
-.nav-nearby,
+   grid-template-rows: 56px 56px 56px;
-.navcell-lore {
+   gap: 6px;
-   width: 94%;
-  margin: 8px auto 0 auto;
-  padding: 8px 10px;
-  font-size: 0.88em;
-  line-height: 1.12;
-  white-space: normal;
-  overflow-wrap: anywhere;
-  word-break: break-word;
-  background: transparent;
-  border: 1px solid rgba(120, 140, 180, 0.25);
-   border-radius: 12px;
-  box-sizing: border-box;
-}
-.navcell-desc p,
-.nav-nearby p,
-.navcell-lore p,
-.navcell-desc div,
-.nav-nearby div,
-.navcell-lore div {
-   margin: 0;
-  padding: 0;
-}
-/* Inline nav (desktop default) */
-.navcell-ui {
-  width: 216px;
-  box-sizing: border-box;
-   margin: 10px auto 0 auto;
 }
@@ Line 57: / Line 25: @@
    align-items: center;
    justify-content: center;
+   background: #2a2a2a;
-   background: #222;
+   border-radius: 8px;
-  border: 1px solid #444;
+   font-size: 13px;
-   border-radius: 7px;
-   color: #eee;
    text-align: center;
-  font-size: 0.72em;
-  line-height: 1.05em;
-  box-sizing: border-box;
 }
 .nav-btn a {
-   color: inherit;
+   color: #eee;
    text-decoration: none;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 2px;
 }
-.nav-btn:hover {
-  background: #333;
-  border-color: #777;
-}
-.nav-empty,
 .nav-center {
    background: transparent;
-  border: none;
 }
-/* Gamepad layout inside the nav pad */
+.nav-ud {
-.nav-pad-inner {
    display: flex;
-  align-items: center;
    justify-content: space-between;
-   gap: 10px;
+   margin-top: 6px;
-  width: 216px;
-  box-sizing: border-box;
 }
-.nav-dpad {
+.nav-ud .nav-btn {
-   display: grid;
+   width: 56px;
-  grid-template-columns: 44px 44px 44px;
-  grid-template-rows: 36px 36px 36px;
-  gap: 4px;
-  margin: 0;
-  padding: 0;
 }
-.nav-dpad .nav-btn {
+.nav-text {
-   width: 44px;
+   margin-top: 160px;
-  height: 36px;
 }
-.nav-ud {
+.nav-desc {
-   display: flex;
+   font-size: 14px;
-   flex-direction: column;
+   line-height: 1.25;
-   gap: 6px;
+   margin-bottom: 6px;
 }
-.nav-ud .nav-btn {
+.nav-nearby {
-  width: 44px;
+   font-size: 13px;
-  height: 36px;
+   opacity: 0.85;
-   font-size: 0.7em;
-}
-/* Desktop wide: keep text and inline nav side by side */
-@media screen and (min-width: 760px) {
-  .navcell-top {
-    display: flex;
-    align-items: flex-start;
-    justify-content: center;
-    gap: 16px;
-    padding: 0 10px;
-  }
-  .navcell-left {
-    flex: 1 1 auto;
-    max-width: 720px;
-   }
-  .navcell-ui {
-    flex: 0 0 auto;
-    margin-top: 8px;
-  }
-}
-/* Mobile: make the nav pad fixed at the bottom like a gamepad */
-@media screen and (max-width: 759px) {
-  body.sk-navpad-on .navcell-ui {
-    position: fixed;
-    left: 50%;
-    bottom: 10px;
-    transform: translateX(-50%);
-    z-index: 9999;
-    margin: 0;
-    padding: 8px 10px;
-    background: rgba(0, 0, 0, 0.85);
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    border-radius: 14px;
-    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05);
-  }
-  body.sk-navpad-on .navcell {
-    padding-bottom: 92px;
-  }
-  body.sk-navpad-off .navcell-ui {
-    display: none;
-  }
 }