@@ Line 1: / Line 1: @@
 /* CSS placed here will be applied to all skins */
+/* Colors from custom Blockheads skin */
+:root {
+	--bh-sky: #4c91c5;
+	--bh-sky-mid: #3976A2;
+	--bh-sky-dark: #326d9b;
+	--bh-grass: #79a957;
+	--bh-dirt: #a87b50;
+	--bh-wood: #c7a477;
+	--bh-wood-dark: #8b6846;
+	--bh-paper: #f7f3eb;
+	--bh-paper-dark: #ebe3d5;
+	--bh-ink: #3b332b;
+	--bh-muted: #776f65;
+	--bh-border: #cdbda5;
+}
 div.editsection
@@ Line 6: / Line 22: @@
 float: right !important;
 }
-/* Mobile compatibility for Infoboxes */
-/* Ensure tables are responsive */
-table {
-    max-width: 100%;
-    width: 100%;
-    margin: 0 auto;
-    border-collapse: collapse;
-}
-table img {
-    max-width: 100%; /* Ensure images within tables scale */
-    height: auto;
-}
-/* Style the outer table for better appearance on mobile */
-.mobile-friendly-table {
-    border: 1px solid silver;
-    background-color: white;
-    font-size: 90%;
-    margin: 10px auto;
-    width: 100%;
-    max-width: 100%;
-    padding: 5px;
-}
-/* Header styling for better visibility on mobile */
-.mobile-friendly-header {
-    font-size: 110%;
-    text-align: center;
-    background-color: #d4e3e5;
-    padding: 10px;
-}
-/* Make images responsive and centered */
-.mobile-friendly-image {
-    background-color: #BCE2E7;
-    background-image: linear-gradient(to bottom, #aed6e3, #caefec);
-    max-width: 160px; /* Use max-width instead of fixed width */
-    height: auto;
-    margin: auto;
-    display: block;
-    text-align: center;
-}
-.mobile-friendly-image img {
-    max-width: 100%; /* Responsive image scaling */
-    height: auto;
-}
-/* Style the icon container */
-.mobile-friendly-icons {
-    text-align: center;
-    margin-top: 10px;
-}
-/* Style icons with proper spacing */
-.mobile-friendly-icons img {
-    max-width: 40px;
-    height: auto;
-    margin: 0 5px;
-}
-/* Make tables more readable on mobile */
-table th,
-table td {
-    padding: 8px;
-    text-align: left;
-    background-color: #d4e3e5;
-}
-@media (max-width: 600px) {
-    /* Scale down font size and padding for mobile devices */
-    .mobile-friendly-header {
-        font-size: 100%;
-        padding: 5px;
-    }
-    .mobile-friendly-table {
-        font-size: 85%;
-    }
-}
 .ns-6 .editsection,
@@ Line 164: / Line 98: @@
      background:hsl(0,0%,92%);
      border-left:4px solid hsl(0,0%,85%)
+}
+/* Crafting Recipe */
+.craft-recipe {
+  background: var(--surface-2);
+  border: 0.5px solid var(--border);
+  border-radius: 8px;
+  padding: 1.25rem;
+  margin: 1.5rem 0;
+}
+.craft-header {
+  font-size: 13px;
+  color: var(--text-secondary);
+  margin-bottom: 1.25rem;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.craft-bench-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+}
+.craft-bench-icon img {
+  max-width: 100%;
+  height: auto;
+}
+.craft-row {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.craft-item {
+  text-align: center;
+  min-width: 60px;
+}
+.craft-icon {
+  width: 36px;
+  height: 36px;
+  margin: 0 auto 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--surface-1);
+  border: 0.5px solid var(--border);
+  border-radius: 4px;
+}
+.craft-icon img {
+  max-width: 100%;
+  height: auto;
+}
+.craft-qty {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-primary);
+  margin-bottom: 0.25rem;
+}
+.craft-name {
+  font-size: 12px;
+  color: var(--text-primary);
+  word-break: break-word;
+}
+.craft-name a {
+  color: var(--text-accent);
+  text-decoration: none;
+}
+.craft-name a:hover {
+  text-decoration: underline;
+}
+.craft-plus {
+  font-size: 16px;
+  color: var(--text-secondary);
+  font-weight: 300;
+}
+.craft-equals {
+  font-size: 16px;
+  color: var(--text-secondary);
+  font-weight: 300;
+  margin: 0 0.5rem;
 }

MediaWiki:Common.css: Difference between revisions

FloofyPlasma (talk | contribs)