BuildingPage/styles.css: Difference between revisions
From Dune Awakening DB
mNo edit summary |
mNo edit summary |
||
| Line 2: | Line 2: | ||
.dune-breadcrumb-nav{ | .dune-breadcrumb-nav{ | ||
display:flex;align-items:center;margin-bottom:12px;font-size:20px; | display:flex;align-items:center;margin-bottom:12px;font-size:20px; | ||
background:rgba(0,0,2,.7);border:1px solid #fce7c8; | background:rgba(0,0,2,.7);border:1px solid #fce7c8;padding:4px 8px;border-radius:2px;} | ||
.dune-breadcrumb-nav a{color:#fce7c8;text-decoration:none;} | .dune-breadcrumb-nav a{color:#fce7c8;text-decoration:none;} | ||
.dune-breadcrumb-nav a:hover{color:#E3BB7A;} | .dune-breadcrumb-nav a:hover{color:#E3BB7A;} | ||
| Line 11: | Line 10: | ||
.dune-card{ | .dune-card{ | ||
background:rgba(0,0,2,.7);color:#E0E0E0;padding:16px;margin:0 0 20px 0; | background:rgba(0,0,2,.7);color:#E0E0E0;padding:16px;margin:0 0 20px 0; | ||
border:1px solid #fce7c8;box-shadow:0 0 8px rgba(0,0,0,.5);} | border:1px solid #fce7c8;box-shadow:0 0 8px rgba(0,0,0,.5); | ||
/* equal-height support ↓ */ | |||
display:flex;flex-direction:column;flex:1 0 auto;height:100%;} | |||
.dune-card-label{ | .dune-card-label{ | ||
color:#b6a896;font-size:12px;text-transform:uppercase;margin-bottom:6px; | color:#b6a896;font-size:12px;text-transform:uppercase;margin-bottom:6px; | ||
| Line 23: | Line 24: | ||
border:1px solid #444;border-radius:2px;padding:12px;margin-bottom:12px;} | border:1px solid #444;border-radius:2px;padding:12px;margin-bottom:12px;} | ||
.dune-card-image{text-align:center;margin:8px 0;} | .dune-card-image{text-align:center;margin:8px 0;} | ||
.dune-card-image img{max-width: | .dune-card-image img{max-width:200px;max-height:200px;object-fit:contain;} /* capped size */ | ||
.has-border,.card-image-border{ | .has-border,.card-image-border{ | ||
border:2px solid #fce7c8;border-radius:4px;background:#262626;padding:4px;} | border:2px solid #fce7c8;border-radius:4px;background:#262626;padding:4px;} | ||
| Line 29: | Line 30: | ||
/* Locked-behind box */ | /* Locked-behind box */ | ||
.dune-card-locked{ | .dune-card-locked{ | ||
margin:16px 0;background:rgba(22,22,24,.4); | margin:16px 0;background:rgba(22,22,24,.4);border:1px solid #444; | ||
border-radius:2px;padding:12px;text-align:center;} | |||
.dune-card-locked-label{ | .dune-card-locked-label{ | ||
color:#fce7c8;font-weight:bold;font-size:12px;margin-bottom:8px; | color:#fce7c8;font-weight:bold;font-size:12px;margin-bottom:8px; | ||
| Line 44: | Line 45: | ||
table.infobox-dune-standard-table{ | table.infobox-dune-standard-table{ | ||
width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0; | width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0; | ||
background:rgba(22,22,24,.4);border-radius:2px;} | background:rgba(22,22,24,.4);border:1px solid #444;border-radius:2px;} | ||
table.infobox-dune-two-column th, | table.infobox-dune-two-column th, | ||
table.infobox-dune-two-column td, | table.infobox-dune-two-column td, | ||
table.infobox-dune-standard-table th, | table.infobox-dune-standard-table th, | ||
table.infobox-dune-standard-table td{ | table.infobox-dune-standard-table td{ | ||
padding:9px 6px;font-size:15px;color:#E0E0E0;border-bottom:1px solid rgba(200,161,101,.3);} | padding:9px 6px;font-size:15px;color:#E0E0E0; | ||
background:rgba(22,22,24,.4); /* kill zebra */ | |||
border-bottom:1px solid rgba(200,161,101,.3);} | |||
table.infobox-dune-two-column thead th, | table.infobox-dune-two-column thead th, | ||
table.infobox-dune-standard-table thead th{ | table.infobox-dune-standard-table thead th, | ||
.tr-dark{ | |||
background:rgba(0,0,2,.7);color:#fce7c8;font-weight:600;text-transform:uppercase;letter-spacing:.05em;} | background:rgba(0,0,2,.7);color:#fce7c8;font-weight:600;text-transform:uppercase;letter-spacing:.05em;} | ||
table.infobox-dune-two-column th .icon, | |||
table.infobox-dune-standard-table th .icon{ | |||
display:inline-flex;align-items:center;justify-content:center;margin-right:.5em;width:1.2em;color:#fce7c8;} | |||
table.infobox-dune-two-column tr:last-child td, | table.infobox-dune-two-column tr:last-child td, | ||
table.infobox-dune-standard-table tr:last-child td{border-bottom:none;} | table.infobox-dune-standard-table tr:last-child td{border-bottom:none;} | ||
@media screen and (max-width:600px){ | @media screen and (max-width:600px){ | ||
| Line 63: | Line 69: | ||
} | } | ||
/* | /*============================================================= | ||
PATCH-20250523-02 – uniform columns (flex) + row colour fix | |||
===============================================================*/ | |||
/* | /* equal-height columns */ | ||
.responsive-container{align-items:stretch;} | |||
.responsive-col{align-self:stretch;height:100%;} | |||
. | .responsive-col>.skin-pivot{flex:1 0 auto;height:100%;} | ||
/* | /* (table backgrounds handled above) */ | ||
Revision as of 01:41, 23 May 2025
/*──────── Breadcrumb strip ───────*/
.dune-breadcrumb-nav{
display:flex;align-items:center;margin-bottom:12px;font-size:20px;
background:rgba(0,0,2,.7);border:1px solid #fce7c8;padding:4px 8px;border-radius:2px;}
.dune-breadcrumb-nav a{color:#fce7c8;text-decoration:none;}
.dune-breadcrumb-nav a:hover{color:#E3BB7A;}
.dune-breadcrumb-separator{margin:0 8px;color:#BBBBBB;}
/*──────── Card component ───────*/
.dune-card{
background:rgba(0,0,2,.7);color:#E0E0E0;padding:16px;margin:0 0 20px 0;
border:1px solid #fce7c8;box-shadow:0 0 8px rgba(0,0,0,.5);
/* equal-height support ↓ */
display:flex;flex-direction:column;flex:1 0 auto;height:100%;}
.dune-card-label{
color:#b6a896;font-size:12px;text-transform:uppercase;margin-bottom:6px;
border-bottom:1px solid #444;padding-bottom:4px;}
.dune-card-title{
margin:0;font-size:20px;color:#fce7c8;text-transform:uppercase;
border-bottom:1px solid #fce7c8;padding-bottom:4px;margin-bottom:8px;display:flex;align-items:center;}
.dune-card-title .icon{margin-right:8px;}
.dune-card-description{
font-size:16px;line-height:1.5;background:rgba(22,22,24,.4);
border:1px solid #444;border-radius:2px;padding:12px;margin-bottom:12px;}
.dune-card-image{text-align:center;margin:8px 0;}
.dune-card-image img{max-width:200px;max-height:200px;object-fit:contain;} /* capped size */
.has-border,.card-image-border{
border:2px solid #fce7c8;border-radius:4px;background:#262626;padding:4px;}
/* Locked-behind box */
.dune-card-locked{
margin:16px 0;background:rgba(22,22,24,.4);border:1px solid #444;
border-radius:2px;padding:12px;text-align:center;}
.dune-card-locked-label{
color:#fce7c8;font-weight:bold;font-size:12px;margin-bottom:8px;
border-bottom:1px solid rgba(200,161,101,.3);padding-bottom:4px;text-transform:uppercase;}
.dune-card-locked-icon{display:inline-block;width:18px;height:18px;margin-right:4px;color:#fce7c8;font-size:16px;}
.dune-card-locked-value{
color:#fce7c8;font-size:16px;padding:4px 8px;border:1px solid rgba(22,22,24,.4);
background:rgba(22,22,24,.4);border-radius:2px;display:inline-block;}
/*──────── Tables ───────*/
.dune-table-wrapper{border:1px solid #444;border-radius:2px;overflow:hidden;width:100%;}
table.infobox-dune-two-column,
table.infobox-dune-standard-table{
width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;
background:rgba(22,22,24,.4);border:1px solid #444;border-radius:2px;}
table.infobox-dune-two-column th,
table.infobox-dune-two-column td,
table.infobox-dune-standard-table th,
table.infobox-dune-standard-table td{
padding:9px 6px;font-size:15px;color:#E0E0E0;
background:rgba(22,22,24,.4); /* kill zebra */
border-bottom:1px solid rgba(200,161,101,.3);}
table.infobox-dune-two-column thead th,
table.infobox-dune-standard-table thead th,
.tr-dark{
background:rgba(0,0,2,.7);color:#fce7c8;font-weight:600;text-transform:uppercase;letter-spacing:.05em;}
table.infobox-dune-two-column th .icon,
table.infobox-dune-standard-table th .icon{
display:inline-flex;align-items:center;justify-content:center;margin-right:.5em;width:1.2em;color:#fce7c8;}
table.infobox-dune-two-column tr:last-child td,
table.infobox-dune-standard-table tr:last-child td{border-bottom:none;}
@media screen and (max-width:600px){
table.infobox-dune-two-column th,table.infobox-dune-two-column td,
table.infobox-dune-standard-table th,table.infobox-dune-standard-table td{
padding:8px 4px;font-size:14px;}
}
/*=============================================================
PATCH-20250523-02 – uniform columns (flex) + row colour fix
===============================================================*/
/* equal-height columns */
.responsive-container{align-items:stretch;}
.responsive-col{align-self:stretch;height:100%;}
.responsive-col>.skin-pivot{flex:1 0 auto;height:100%;}
/* (table backgrounds handled above) */