MediaWiki:Pivot.css
From Dune Awakening DB
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* FINAL: Dune-Themed Pivot Skin using Approach #1 (No Parallax, 100% Stretch)
1) The gradient covers the entire vertical page, regardless of scroll.
2) The footer is transparent, so no white band at the bottom.
3) All major containers are transparent so the background shows through.
*/
/**********************************************************/
/* 1) RESET MARGINS & ENSURE BODY CAN GROW AS TALL AS NEEDED */
/**********************************************************/
html, body {
margin: 0;
padding: 0;
height: auto; /* Let the page grow vertically as needed */
min-height: 100%; /* Start at least full viewport height */
}
/********************************************/
/* 2) BODY GRADIENT (APPROACH #1: STRETCH) */
/********************************************/
body.skin-pivot {
background-color: #171F23; /* fallback */
/* Linear gradient from dark (75%) to brown */
background: linear-gradient(
to bottom,
#171F23 0%,
#171F23 75%,
#784220 100%
) no-repeat center top;
background-size: 100% 100%;
background-attachment: scroll;
color: #F0DFAF;
font-family: "Orbitron", sans-serif;
}
/************************************************/
/* 3) FORCE MAJOR WRAPPERS TO BE TRANSPARENT */
/************************************************/
.skin-pivot .off-canvas-wrap,
.skin-pivot .docs-wrap,
.skin-pivot .inner-wrap,
.skin-pivot #page-base,
.skin-pivot .page-base,
.skin-pivot #main-section.main-section,
.skin-pivot #page-content,
.skin-pivot .row,
.skin-pivot .columns,
.skin-pivot #sidebar.large-2.medium-3.columns.hide-for-small.hide-for-print,
.skin-pivot .exit-off-canvas {
background: transparent !important;
border: none !important;
}
/***********************************************************/
/* 4) FOOTER, CATLINKS, PRINTFOOTER: ALSO TRANSPARENT */
/***********************************************************/
.skin-pivot footer,
.skin-pivot .footer,
.skin-pivot #footer,
.skin-pivot .mw-footer,
.skin-pivot #mw-footer-container,
.skin-pivot #mw-footer,
.skin-pivot #catlinks,
.skin-pivot .catlinks,
.skin-pivot .printfooter,
.skin-pivot #mw-data-after-content {
background: transparent !important;
border: none !important;
color: #F0DFAF !important;
}
/************************************************************/
/* 5) MAIN CONTENT OVERLAY BOX (Darkish, slightly transparent) */
/************************************************************/
.skin-pivot #content,
.skin-pivot .mw-body,
.skin-pivot .mw-content-ltr,
.skin-pivot .mw-content-rtl {
background-color: #171F23; /* fallback */
background: rgba(23, 31, 35, 0.85);
padding: 15px; /* Reduced from 20px */
border-radius: 10px;
box-shadow: 0 0 15px rgba(255, 204, 102, 0.3);
margin-bottom: 15px;
margin: 0; /* Remove unnecessary margins */
}
/***********************************************************/
/* 6) ADDITIONAL "DUNE" THEME STYLES (NAV, HEADINGS, ETC.) */
/***********************************************************/
/* Navbars */
.skin-pivot .navbar,
.skin-pivot .navbar-default,
.skin-pivot .navbar-inverse {
background-color: #171F23; /* fallback */
background: rgba(23, 31, 35, 0.9) !important;
border: none !important;
color: #F0DFAF !important;
}
.skin-pivot .navbar-nav > li > a,
.skin-pivot .dropdown-menu > li > a {
color: #D97D3A !important;
font-weight: bold !important;
text-decoration: none;
}
.skin-pivot .navbar-nav > li > a:hover,
.skin-pivot .dropdown-menu > li > a:hover {
color: #E28D4F !important;
text-decoration: underline;
}
/* Sidebar & panels */
.skin-pivot #nav,
.skin-pivot #nav-wrapper,
.skin-pivot .nav-content,
.skin-pivot .list-group,
.skin-pivot .list-group-item {
background-color: #171F23; /* fallback */
background: rgba(23, 31, 35, 0.9);
border: none;
color: #F0DFAF;
}
.skin-pivot .list-group-item:hover {
background-color: rgba(23, 31, 35, 1);
}
/* Panel/Sidebar headings */
.skin-pivot #nav h3,
.skin-pivot #nav-wrapper h3,
.skin-pivot .panel-heading,
.skin-pivot .nav-content h3 {
background-color: transparent;
border: none;
color: #F8E4B8;
margin: 10px 0 5px;
font-weight: bold;
text-transform: uppercase;
}
/* Common styles for all headings in main content without text transformation */
.skin-pivot h1,
.skin-pivot h2,
.skin-pivot h3,
.skin-pivot h4,
.skin-pivot h5,
.skin-pivot h6 {
color: #F8E4B8;
font-weight: bold;
padding-bottom: 5px;
margin-top: 1em;
margin-bottom: 0.5em;
border-bottom: none;
text-transform: none;
}
/* Only H1 and H3 are uppercase and have an underline */
.skin-pivot h1,
.skin-pivot h3 {
border-bottom: 2px solid rgba(255, 255, 255, 0.3);
}
.skin-pivot h4,
.skin-pivot h5,
.skin-pivot h6 {
color: #F8E4B8;
font-weight: bold;
padding-bottom: 3px;
margin-top: 0.5em;
margin-bottom: 0.5em;
border-bottom: none;
}
/* Links site-wide */
.skin-pivot a {
color: #D97D3A;
text-decoration: none;
font-weight: bold;
}
.skin-pivot a:hover {
color: #E28D4F;
text-decoration: underline;
}
/* Make non-existing page links (redlinks) appear red again */
.skin-pivot a.new,
.skin-pivot a.new:visited {
color: #BA0000 !important;
text-decoration: underline;
}
.skin-pivot a.new:hover {
color: #DD0000 !important;
}
/***********************************************************/
/* Additional Pivot Nav Overrides */
/***********************************************************/
.skin-pivot nav.tab-bar.hide-for-print {
background: rgba(23, 31, 35, 0.9);
border: none;
color: #F0DFAF;
padding: 0.5em;
}
.skin-pivot nav.tab-bar.hide-for-print a {
color: #D97D3A;
text-decoration: none;
font-weight: bold;
}
.skin-pivot nav.tab-bar.hide-for-print a:hover {
color: #E28D4F;
text-decoration: underline;
}
/* Title link in the middle nav area */
.skin-pivot nav.tab-bar.hide-for-print .title a {
color: #F8E4B8;
font-size: 1.2em;
text-transform: uppercase;
}
/* Left/middle/right nav sections inside the tab-bar */
.skin-pivot #left-nav-aside,
.skin-pivot #middle-nav,
.skin-pivot #right-nav-aside {
background-color: transparent;
color: #F0DFAF;
}
/* Logo element */
.skin-pivot li.name.logo img {
max-width: 100%;
height: auto;
display: inline-block;
vertical-align: middle;
}
/* Search bar in <li class="has-form"> */
.skin-pivot li.has-form input[type="search"] {
background-color: #1E140A; /* fallback */
background: rgba(30, 20, 10, 0.8);
color: #F0DFAF;
border: 1px solid #D97D3A;
padding: 0.5em;
width: 100%;
}
.skin-pivot li.has-form input[type="search"]::placeholder {
color: #C9B795;
}
/* Navigation labels (sidebar) */
.skin-pivot label.sidebar {
background-color: transparent;
color: #F8E4B8;
font-weight: bold;
text-transform: uppercase;
padding: 0.5em 0;
display: block;
border-bottom: 2px solid rgba(255, 255, 255, 0.3);
margin-bottom: 0.5em;
}
.skin-pivot li.mw-list-item a {
color: #D97D3A;
font-weight: bold;
text-decoration: none;
display: block;
padding: 0.25em 0;
}
.skin-pivot li.mw-list-item a:hover {
color: #E28D4F;
text-decoration: underline;
}
/***********************************************************/
/* SIDEBAR/HIDING TOOLS (Preserved) */
/***********************************************************/
html body.skin-pivot #p-tb,
html body.skin-pivot #p-tb + ul {
display: none !important;
}
html body.skin-pivot #p-tb + li {
display: none !important;
}
li[id^="t-"] {
display: none !important;
}
/***********************************************************/
/* Two‑Column Table Overrides (Dark Gray) */
/***********************************************************/
.skin-pivot table.two-column-table {
background-color: #171F23 !important;
border: none !important;
width: 100% !important;
table-layout: fixed;
}
.skin-pivot table.two-column-table > thead,
.skin-pivot table.two-column-table > thead > tr,
.skin-pivot table.two-column-table > thead > tr > th,
.skin-pivot table.two-column-table > thead > tr > td {
background-color: #171F23 !important;
border: none !important;
vertical-align: top;
}
.skin-pivot table.two-column-table > tbody,
.skin-pivot table.two-column-table > tbody > tr {
background-color: #171F23 !important;
border: none !important;
}
.skin-pivot table.two-column-table > tbody > tr > td,
.skin-pivot table.two-column-table > tbody > tr > th {
background-color: #171F23 !important;
border: none !important;
vertical-align: top;
}
/* Vertical divider on first column */
.skin-pivot table.two-column-table > tbody > tr > td:first-child {
border-right: 2px solid rgba(255, 255, 255, 0.3) !important;
}
.skin-pivot table.two-column-table > tfoot,
.skin-pivot table.two-column-table > tfoot > tr,
.skin-pivot table.two-column-table > tfoot > tr > td,
.skin-pivot table.two-column-table > tfoot > tr > th {
background-color: #171F23 !important;
border: none !important;
vertical-align: top;
}
.skin-pivot table.two-column-table > tbody > tr > td p,
.skin-pivot table.two-column-table > thead > tr > td p,
.skin-pivot table.two-column-table > thead > tr > th p,
.skin-pivot table.two-column-table > tfoot > tr > td p,
.skin-pivot table.two-column-table > tfoot > tr > th p {
margin: 0;
padding: 0;
background-color: #171F23 !important;
}
/***********************************************************/
/* Responsive: Switch Two‑Column to Single‑Column */
/***********************************************************/
@media only screen and (max-width: 600px) {
.skin-pivot table.two-column-table > tbody > tr {
display: flex;
flex-direction: column;
}
.skin-pivot table.two-column-table > tbody > tr > td,
.skin-pivot table.two-column-table > tbody > tr > th {
display: block;
width: 100%;
border: none !important;
box-sizing: border-box;
vertical-align: top;
}
}
/***********************************************************/
/* Demo Test Table (Scoped to Pivot Skin) */
/***********************************************************/
.skin-pivot table.demo-test-table {
width: 100% !important;
table-layout: fixed;
border-collapse: collapse;
border: 2px solid red !important;
background-color: #222 !important;
}
.skin-pivot table.demo-test-table td,
.skin-pivot table.demo-test-table tr {
vertical-align: top;
text-align: left !important;
padding: 0.5em !important;
border: 1px dotted yellow !important;
}
.skin-pivot table.demo-test-table th {
vertical-align: top;
text-align: left !important;
padding: 0.5em !important;
border: 1px dotted yellow !important;
}
/***********************************************************/
/* Dune Theme Special Header with Pointed Effect */
/***********************************************************/
.skin-pivot .dune-box {
height: auto; /* Allow height to adjust to content */
line-height: 1.5rem;
border-top: 3px solid #F8E4B8;
border-bottom: 3px solid #F8E4B8;
width: fit-content;
padding: 0.2rem 0;
text-align: center;
display: flex;
align-items: center; /* Vertically centers content */
justify-content: center; /* Horizontally centers content */
font-family: sans-serif;
color: #F8E4B8;
flex-grow: 1; /* Allows it to expand */
font-size: 1.5rem; /* Adjust font size as needed */
}
.skin-pivot .dune-box::before {
content: '';
display: inline-block;
position: relative;
left: -0.5em; /* Adjust to position relative to the box */
transform: rotate(-45deg);
border-top: 3px solid #F8E4B8;
border-left: 3px solid #F8E4B8;
width: 2em !important;
height: 2em !important;
}
.skin-pivot .dune-box::after {
content: '';
display: inline-block;
position: relative;
right: -0.5em; /* Adjust to position relative to the box */
transform: rotate(135deg);
border-top: 3px solid #F8E4B8;
border-left: 3px solid #F8E4B8;
width: 2em !important;
height: 2em !important;
}
/***********************************************************/
/* No-Style Table Overrides (transparent background, no border) */
/***********************************************************/
.skin-pivot table.nostyle-table {
background-color: transparent !important;
border: none !important;
width: auto !important;
table-layout: auto;
}
/* Remove borders / backgrounds on thead */
.skin-pivot table.nostyle-table > thead,
.skin-pivot table.nostyle-table > thead > tr,
.skin-pivot table.nostyle-table > thead > tr > th,
.skin-pivot table.nostyle-table > thead > tr > td {
background-color: transparent !important;
border: none !important;
vertical-align: top;
}
/* Remove borders / backgrounds on tbody */
.skin-pivot table.nostyle-table > tbody,
.skin-pivot table.nostyle-table > tbody > tr {
background-color: transparent !important;
border: none !important;
}
/* Remove borders / backgrounds on each cell of tbody */
.skin-pivot table.nostyle-table > tbody > tr > td,
.skin-pivot table.nostyle-table > tbody > tr > th {
background-color: transparent !important;
border: none !important;
vertical-align: top;
}
/* Remove borders / backgrounds on tfoot */
.skin-pivot table.nostyle-table > tfoot,
.skin-pivot table.nostyle-table > tfoot > tr,
.skin-pivot table.nostyle-table > tfoot > tr > td,
.skin-pivot table.nostyle-table > tfoot > tr > th {
background-color: transparent !important;
border: none !important;
vertical-align: top;
}
/* Eliminate margins/padding for any <p> within the table cells */
.skin-pivot table.nostyle-table > tbody > tr > td p,
.skin-pivot table.nostyle-table > thead > tr > td p,
.skin-pivot table.nostyle-table > thead > tr > th p,
.skin-pivot table.nostyle-table > tfoot > tr > td p,
.skin-pivot table.nostyle-table > tfoot > tr > th p {
margin: 0;
padding: 0;
background-color: transparent !important;
}
/***********************************************************/
/* 8) DUNE-STYLE Infobox Table – Overrides Pivot Table Rules */
/***********************************************************/
.skin-pivot table.infobox-dune {
width: 100% !important;
border-collapse: collapse !important;
margin-bottom: 0.5em !important;
background-color: #262626 !important;
border: 1px solid #444 !important;
border-radius: 4px !important;
table-layout: auto;
}
.skin-pivot table.infobox-dune th,
.skin-pivot table.infobox-dune td {
padding: 6px 8px !important;
font-size: 0.85em !important;
color: #e2d3ae !important;
border-bottom: 1px solid #3a3a3a !important;
vertical-align: middle !important;
background-color: #262626 !important;
text-align: left !important;
}
.skin-pivot table.infobox-dune td {
text-align: right !important;
}
.skin-pivot table.infobox-dune tr:last-child th,
.skin-pivot table.infobox-dune tr:last-child td {
border-bottom: none !important;
}
/* ===================================================== */
/* DUNE-THEMED MAIN CARD (Card Module Styles) */
/* ===================================================== */
.dune-card {
position: relative;
background-color: #1c1c1c;
color: #e2d3ae;
/* Remove the old fixed width: 400px */
width: auto !important;
max-width: 100% !important; /* Ensures it can fill its parent on small screens */
padding: 16px;
margin: 1em;
border: 1px solid #e2d3ae;
border-radius: 6px;
box-sizing: border-box;
}
.dune-card-decoration {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
border: 2px solid #e2d3ae;
border-radius: 6px;
transform: translate(4px, 4px);
}
.dune-card-inner {
position: relative;
z-index: 1;
}
.dune-card-label {
color: #b6a896;
font-size: 0.8em;
text-transform: uppercase;
margin-bottom: 6px;
border-bottom: 1px solid #444;
padding-bottom: 4px;
}
.dune-card-title {
margin: 0;
font-size: 1.4em;
color: #e2d3ae;
text-transform: uppercase;
border-bottom: 1px solid #444;
padding-bottom: 4px;
margin-bottom: 8px;
}
.dune-card-image {
text-align: center;
margin-bottom: 8px;
}
.dune-card-description {
font-size: 0.9em;
text-align: left;
line-height: 1.4;
background-color: #262626;
border-radius: 4px;
border: 1px solid #444;
padding: 10px;
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
display: block !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
white-space: normal;
}
.dune-card-locked {
background-color: #262626;
border: 1px solid #444;
border-radius: 4px;
text-align: center;
padding: 8px;
margin-bottom: 12px;
}
.dune-card-locked-label {
font-size: 0.9em;
margin-bottom: 4px;
text-align: center;
}
.dune-card-locked-icon {
color: #b6a896;
margin-right: 4px;
}
.dune-card-infobox table {
width: 100%;
border-collapse: collapse;
margin-bottom: 0.5em;
background-color: #262626;
border: 1px solid #444;
border-radius: 4px;
table-layout: auto;
}
.dune-card-infobox th,
.dune-card-infobox td {
padding: 6px 8px;
font-size: 0.85em;
color: #e2d3ae;
border-bottom: 1px solid #3a3a3a;
vertical-align: middle;
background-color: #262626;
text-align: left;
}
.dune-card-infobox td {
text-align: right;
}
.dune-card-infobox tr:last-child th,
.dune-card-infobox tr:last-child td {
border-bottom: none;
}
.dune-card-infobox .icon {
display: inline-block;
width: 1.5em;
text-align: center;
margin-right: 4px;
}
.dune-card-infobox .infobox-child {
padding-left: 1.8em;
}
/***********************************************************/
/* 9) DUNE-INFOBOX MODULE STYLES (Angled Container) */
/***********************************************************/
.skin-pivot .dune-infobox {
position: relative;
background-color: #1c1c1c;
color: #e2d3ae;
width: 100%;
padding: 16px;
margin: 1em 0;
border: 1px solid #e2d3ae;
border-radius: 6px;
box-sizing: border-box;
}
.skin-pivot .dune-infobox::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
border: 2px solid #e2d3ae;
border-radius: 6px;
transform: translate(4px, 4px);
}
/* =========== Here are the 'omitted' child rules =========== */
/* Toplevel label (above the title) */
.skin-pivot .dune-infobox-toplabel {
color: #b6a896;
font-size: 0.8em;
text-transform: uppercase;
margin-bottom: 6px;
border-bottom: 1px solid #444;
padding-bottom: 4px;
}
/* Main infobox title line */
.skin-pivot .dune-infobox-title {
margin: 0;
font-size: 1.4em;
color: #e2d3ae;
text-transform: uppercase;
border-bottom: 1px solid #444;
padding-bottom: 4px;
margin-bottom: 8px;
}
/* Image block */
.skin-pivot .dune-infobox-image {
text-align: center;
margin-bottom: 8px;
}
.skin-pivot .dune-infobox-image img {
max-width: 100%;
max-height: 150px;
object-fit: contain;
border: 1px solid #444;
border-radius: 4px;
}
/* Main description area */
.skin-pivot .dune-infobox-description {
font-size: 0.9em;
line-height: 1.4;
margin-bottom: 12px;
background-color: #262626;
border-radius: 4px;
padding: 8px;
border: 1px solid #444;
}
/* 'Locked' block (like an info box about locked features) */
.skin-pivot .dune-infobox-locked-block {
background-color: #262626;
border: 1px solid #444;
border-radius: 4px;
text-align: center;
padding: 8px;
margin-bottom: 12px;
}
.skin-pivot .dune-infobox-locked-header {
font-size: 0.9em;
margin-bottom: 4px;
}
.skin-pivot .lock-icon {
color: #b6a896;
margin-right: 4px;
}
.skin-pivot .dune-infobox-locked-desc {
font-size: 1em;
color: #e2d3ae;
}
/* Stats table for the infobox */
.skin-pivot .dune-infobox-stats {
width: 100%;
border-collapse: collapse;
margin-bottom: 0.5em;
background-color: #262626;
border: 1px solid #444;
border-radius: 4px;
}
.skin-pivot .dune-infobox-stats th,
.skin-pivot .dune-infobox-stats td {
padding: 6px 8px;
font-size: 0.85em;
border-bottom: 1px solid #3a3a3a;
color: #e2d3ae;
}
.skin-pivot .dune-infobox-stats th {
text-align: left;
font-weight: normal;
}
.skin-pivot .dune-infobox-stats td {
text-align: right;
}
.skin-pivot .dune-infobox-stats tr:last-child th,
.skin-pivot .dune-infobox-stats tr:last-child td {
border-bottom: none;
}
/* Inline icon usage, e.g. for bullets or small images */
.skin-pivot .icon-inline {
display: inline-block;
width: 1.5em;
text-align: center;
margin-right: 4px;
}
.skin-pivot .ingredient-list {
margin: 0;
padding-left: 1.2em;
font-size: 0.85em; /* match your table's text size */
line-height: 1.4;
list-style-type: square;
text-align: left;
}
/***********************************************************/
/* 10) RESPONSIVE LAYOUT: 1 -> 2 -> 3 columns, min ~320px,
Equal Height Columns with Last Module Expanding */
/***********************************************************/
.responsive-container {
display: flex;
flex-wrap: wrap;
gap: 0.25em; /* Reduced from 0.35em to tighten spacing */
/* Use stretch to force columns in the same row to have equal height */
align-items: stretch;
width: 100%;
margin-top: 0.25em;
margin-bottom: 0.25em;
box-sizing: border-box;
}
/* Make each column a vertical flex container */
.responsive-col {
display: flex;
flex-direction: column;
box-sizing: border-box;
width: 100%;
min-width: 350px; /* Reduced from 400px to allow tighter layout */
}
/* At 700px or larger, allow 2 columns */
@media screen and (min-width: 700px) {
.responsive-col {
width: calc(50% - 0.3em); /* half the container minus half the gap */
}
}
/* At 1100px or larger, allow 3 columns */
@media screen and (min-width: 1100px) {
.responsive-col {
width: calc(33.333% - 0.26em); /* roughly one-third minus a bit for gaps */
}
}
/* Let the last .skin-pivot in each column expand to fill vertical space */
.responsive-col .skin-pivot:last-child {
flex: 1 1 auto; /* grow to fill remaining vertical space */
display: flex;
flex-direction: column; /* so its children can also flex */
}
/* Optionally, let the .dune-card inside that .skin-pivot fill extra space */
.responsive-col .skin-pivot:last-child .dune-card {
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
/* ===================================================== */
/* DUNE-CARD-INFOBOX-LEFT (Left-aligned variant) */
/* ===================================================== */
.dune-card-infobox-left table {
width: 100%;
border-collapse: collapse;
margin-bottom: 0.5em;
background-color: #262626;
border: 1px solid #444;
border-radius: 4px;
table-layout: auto;
}
.dune-card-infobox-left th,
.dune-card-infobox-left td {
padding: 6px 8px;
font-size: 0.85em;
color: #e2d3ae;
border-bottom: 1px solid #3a3a3a;
vertical-align: middle;
background-color: #262626;
text-align: left;
}
/* Override the right alignment with higher specificity */
.skin-pivot .dune-card-infobox-left table.infobox-dune td {
text-align: left !important;
}
.dune-card-infobox-left tr:last-child th,
.dune-card-infobox-left tr:last-child td {
border-bottom: none;
}
.dune-card-infobox-left .icon {
display: inline-block;
width: 1.5em;
text-align: center;
margin-right: 4px;
}
.dune-card-infobox-left .infobox-child {
padding-left: 1.8em;
}
/* ===================================================== */
/* New Stuff Claude */
/* ===================================================== */
/* Enhanced Panel Styling */
.skin-pivot .game-panel {
background: linear-gradient(to bottom, #1a1a1a, #171F23);
border: 1px solid #754320;
border-radius: 5px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 215, 128, 0.1) inset;
margin-bottom: 10px; /* Reduced from 15px */
position: relative;
overflow: hidden;
}
.skin-pivot .game-panel::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(to right, transparent, rgba(255, 204, 102, 0.3), transparent);
}
/* Enhanced Section Headers */
.skin-pivot .game-panel-header {
background-color: rgba(120, 66, 32, 0.3);
border-bottom: 1px solid #784220;
padding: 6px 10px; /* Reduced from 10px 15px */
position: relative;
text-transform: uppercase;
font-weight: bold;
color: #F8E4B8;
letter-spacing: 0.5px;
display: flex;
align-items: center;
}
.skin-pivot .game-panel-header::before,
.skin-pivot .game-panel-header::after {
content: '';
display: inline-block;
width: 12px;
height: 12px;
border-top: 2px solid #D97D3A;
border-left: 2px solid #D97D3A;
transform: rotate(-45deg);
margin: 0 12px;
}
.skin-pivot .game-panel-header::after {
transform: rotate(135deg);
}
.skin-pivot .game-panel-header .header-icon {
margin-right: 8px;
}
/* Enhanced Panel Content */
.skin-pivot .game-panel-content {
padding: 8px 12px; /* Reduced from 15px */
color: #F0DFAF;
font-size: 0.9em;
}
/* Enhanced Table Styling */
.skin-pivot .game-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 10px;
}
.skin-pivot .game-table th {
background-color: rgba(120, 66, 32, 0.2);
color: #F8E4B8;
padding: 6px; /* Reduced from 8px */
text-align: left;
font-weight: normal;
text-transform: uppercase;
font-size: 0.85em;
letter-spacing: 0.5px;
border-bottom: 1px solid #784220;
}
.skin-pivot .game-table td {
padding: 4px 6px; /* Reduced from 8px */
border-bottom: 1px solid rgba(120, 66, 32, 0.3);
vertical-align: middle;
}
.skin-pivot .game-table tr:nth-child(even) td {
background-color: rgba(23, 31, 35, 0.4);
}
.skin-pivot .game-table tr:last-child td {
border-bottom: none;
}
/* Table column alignment for crafting section */
.skin-pivot .game-table td:first-child {
width: 25%; /* Output column */
}
.skin-pivot .game-table td:nth-child(2) {
width: 55%; /* Recipe column */
}
.skin-pivot .game-table td:last-child {
width: 20%; /* Time column */
text-align: center;
}
/* Resource Item Styling */
.skin-pivot .resource {
display: inline-flex;
align-items: center;
padding: 2px 6px;
background-color: rgba(23, 31, 35, 0.6);
border: 1px solid rgba(120, 66, 32, 0.6);
border-radius: 3px;
margin-right: 5px;
margin-bottom: 5px;
color: #F0DFAF;
}
.skin-pivot .resource .resource-icon {
margin-right: 4px;
}
.skin-pivot .resource .resource-amount {
font-weight: bold;
color: #D97D3A;
}
/* Button Styling */
.skin-pivot .game-button {
background: linear-gradient(to bottom, #784220, #613618);
border: 1px solid #D97D3A;
color: #F8E4B8;
padding: 8px 12px;
border-radius: 3px;
cursor: pointer;
text-transform: uppercase;
font-size: 0.85em;
letter-spacing: 0.5px;
transition: all 0.2s ease;
position: relative;
}
.skin-pivot .game-button:hover {
background: linear-gradient(to bottom, #8a502a, #6d3e1c);
box-shadow: 0 0 8px rgba(217, 125, 58, 0.4);
}
.skin-pivot .game-button:active {
top: 1px;
}
/* Progress Bar */
.skin-pivot .progress-bar {
height: 10px;
background-color: rgba(23, 31, 35, 0.8);
border: 1px solid #784220;
border-radius: 5px;
overflow: hidden;
margin: 5px 0;
}
.skin-pivot .progress-fill {
height: 100%;
background: linear-gradient(to right, #D97D3A, #E28D4F);
width: 0%; /* Adjust width with JS */
transition: width 0.3s ease;
}
/* Hover Effects for Interactive Elements */
.skin-pivot a:not(.game-button),
.skin-pivot .clickable {
transition: color 0.2s ease, text-shadow 0.2s ease;
}
.skin-pivot a:not(.game-button):hover,
.skin-pivot .clickable:hover {
color: #E28D4F;
text-shadow: 0 0 5px rgba(226, 141, 79, 0.4);
}
/* Tooltip Styling */
.skin-pivot .tooltip {
position: relative;
display: inline-block;
cursor: help;
}
.skin-pivot .tooltip .tooltip-text {
visibility: hidden;
width: 200px;
background-color: #1c1c1c;
color: #F0DFAF;
text-align: center;
border: 1px solid #784220;
border-radius: 5px;
padding: 8px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -100px;
opacity: 0;
transition: opacity 0.3s;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
font-size: 0.85em;
}
.skin-pivot .tooltip:hover .tooltip-text {
visibility: visible;
opacity: 1;
}
/* Badge/Status Indicators */
.skin-pivot .badge {
display: inline-block;
padding: 3px 6px;
border-radius: 3px;
font-size: 0.75em;
margin-left: 5px;
text-transform: uppercase;
}
.skin-pivot .badge-functional {
background-color: rgba(65, 130, 65, 0.3);
border: 1px solid #5a9d5a;
color: #a3d9a3;
}
.skin-pivot .badge-locked {
background-color: rgba(130, 65, 65, 0.3);
border: 1px solid #9d5a5a;
color: #d9a3a3;
}
/* Enhanced Responsive Layout */
@media screen and (max-width: 700px) {
.responsive-container {
flex-direction: column;
}
.responsive-col {
width: 100%;
min-width: unset;
}
.skin-pivot .game-panel-header::before,
.skin-pivot .game-panel-header::after {
width: 8px;
height: 8px;
margin: 0 8px;
}
}
/* Animation for loading or processing */
@keyframes pulsate {
0% { opacity: 0.6; }
50% { opacity: 1; }
100% { opacity: 0.6; }
}
.skin-pivot .loading {
animation: pulsate 1.5s infinite;
}
/***********************************************************/
/* NEW FIXES FOR BREADCRUMB AND SPACING ISSUES */
/***********************************************************/
/* Remove extra container around breadcrumbs */
.skin-pivot .breadcrumbs-container {
margin: 0;
padding: 0;
border: none;
background: transparent;
}
/* Style the breadcrumb navigation properly */
.skin-pivot .breadcrumb-trail {
display: inline-flex;
align-items: center;
padding: 5px 0;
margin: 0;
color: #D97D3A;
}
/* Fix the "Breadcrumb not available" message styling */
.skin-pivot .breadcrumb-unavailable {
background-color: rgba(23, 31, 35, 0.6);
border: 1px solid #784220;
padding: 5px 10px;
margin-bottom: 10px;
color: #F0DFAF;
font-size: 0.9em;
}
/* Page title styling */
.skin-pivot h1.firstHeading,
.skin-pivot .page-header h1 {
color: #F8E4B8;
font-size: 1.6em;
font-weight: bold;
margin: 0 0 10px 0;
padding-bottom: 5px;
border-bottom: 2px solid rgba(215, 125, 58, 0.4);
text-transform: uppercase;
}
/* "From Dune Awakening DB" subtext */
.skin-pivot .fromdb {
color: #784220;
font-size: 0.85em;
margin: -5px 0 15px 0;
opacity: 0.7;
}
/* Video container improvements */
.skin-pivot .video-container {
border: 1px solid #754320;
border-radius: 3px;
overflow: hidden;
margin-bottom: 8px;
}
/* Related buildings section */
.skin-pivot .related-buildings {
padding: 8px;
background-color: rgba(23, 31, 35, 0.4);
}
.skin-pivot .related-buildings p {
margin: 5px 0;
color: #F0DFAF;
font-size: 0.9em;
}
/* Fix spacing between sections on the page */
.skin-pivot .schematic-section,
.skin-pivot .crafting-section,
.skin-pivot .tutorials-section {
margin-bottom: 10px;
}
/* Fix spacing between the three main columns */
.skin-pivot .schematic-section .game-panel,
.skin-pivot .crafting-section .game-panel,
.skin-pivot .tutorials-section .game-panel {
margin-bottom: 8px;
}
/* 1. REMOVE EXTRA CONTAINER AROUND BREADCRUMBS */
/* This targets any unnecessary containers that might be wrapping the breadcrumb area */
body.skin-pivot #mw-content-text > div:not([class]):first-child,
body.skin-pivot .breadcrumb-container > div:empty,
body.skin-pivot .mw-parser-output > div:first-child:empty {
display: none !important;
}
/* 2. FIX BREADCRUMB NOT AVAILABLE STYLING */
body.skin-pivot .breadcrumb-unavailable,
body.skin-pivot .mw-parser-output > div:first-child:contains("Breadcrumb not available") {
background-color: rgba(23, 31, 35, 0.7) !important;
border: 1px solid #784220 !important;
padding: 5px 10px !important;
margin-bottom: 10px !important;
color: #F0DFAF !important;
font-size: 0.9em !important;
}
/* 3. TIGHTEN SPACING BETWEEN ELEMENTS */
/* Reduce margins between panels */
body.skin-pivot .game-panel,
body.skin-pivot [class*="section"] > div {
margin-bottom: 8px !important;
}
/* Reduce padding inside panels */
body.skin-pivot .game-panel-content,
body.skin-pivot [class*="content"],
body.skin-pivot .mw-parser-output > div > div {
padding: 8px !important;
}
/* Tighten spacing in tables */
body.skin-pivot table th,
body.skin-pivot table td {
padding: 4px 6px !important;
}
/* 4. TABLE ALIGNMENT IN CRAFTING SECTION */
body.skin-pivot .game-table td:first-child,
body.skin-pivot table[class*="craft"] td:first-child {
width: 25% !important; /* Output column */
}
body.skin-pivot .game-table td:nth-child(2),
body.skin-pivot table[class*="craft"] td:nth-child(2) {
width: 55% !important; /* Recipe column */
}
body.skin-pivot .game-table td:last-child,
body.skin-pivot table[class*="craft"] td:last-child {
width: 20% !important; /* Time column */
text-align: center !important;
}