Template:NavCell: Difference between revisions

← Older edit

Latest revision as of 16:39, 20 December 2025

Nearby: None

@@ Line 1: / Line 1: @@
-/* SK navigation cells */
+<templatestyles src="Template:NavCell/styles.css" />
-.navcell {
+<div class="navcell">
-   margin: 1.5em 0;
+   <div class="navcell-top">
-}
-/* 3×3 compass grid */
+    <div class="navcell-ui" id="sk-navpad">
+      <div class="nav-pad-inner">
-.nav-grid {
+        <div class="nav-dpad">
-  display: grid;
+          <div class="nav-empty"></div>
-  grid-template-columns: 60px 60px 60px;
+          <div class="nav-btn nav-link-north">{{{north|}}}</div>
-  grid-template-rows: 60px 60px 60px;
+          <div class="nav-empty"></div>
-  gap: 6px;
-  justify-content: center;
-  margin: 1em 0;
-}
-.nav-btn {
+          <div class="nav-btn nav-link-west">{{{west|}}}</div>
-  display: flex;
+          <div class="nav-center"></div>
-  align-items: center;
+          <div class="nav-btn nav-link-east">{{{east|}}}</div>
-  justify-content: center;
-  background: #222;
-  border: 1px solid #444;
-  border-radius: 6px;
-  font-size: 0.9em;
-  text-decoration: none !important;
-  color: #eee !important;
-}
-.nav-btn:hover {
+          <div class="nav-empty"></div>
-  background: #333;
+          <div class="nav-btn nav-link-south">{{{south|}}}</div>
-  border-color: #777;
+          <div class="nav-empty"></div>
-}
+        </div>
-.nav-empty {
+        <div class="nav-ud">
-  background: transparent;
+          <div class="nav-btn nav-link-up">{{{up|}}}</div>
-  border: none;
+          <div class="nav-btn nav-link-down">{{{down|}}}</div>
-}
+        </div>
-/* Up / Down row */
+      </div>
+    </div>
-.nav-vertical-row {
+    <div class="navcell-left">
-  display: flex;
+      <div class="navcell-desc">{{{desc|}}}</div>
-  justify-content: center;
+      <div class="nav-nearby">Nearby: {{{nearby|None}}}</div>
-  gap: 8px;
+      <div class="navcell-lore">{{{lore|}}}</div>
-  margin: 0.5em 0 1em 0;
+    </div>
-}
-.nav-vertical {
+   </div>
-   min-width: 70px;
+</div>
-}
-/* Make the link fill the button */
-.nav-btn a {
-  text-decoration: none !important;
-  color: inherit !important;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}