Actions

Template

BuildingPage/styles.css: Difference between revisions

From Dune Awakening DB

< Template:BuildingPage
Newer edit →
Created page with "→─── Breadcrumb strip ───────────────────────────────: .dune-breadcrumb-nav { font-size:.9rem; margin:6px 0 14px 0; } .dune-breadcrumb-separator { margin:0 4px; color:var(--dune-gold); } →─── Card component (locked, video, image) ──────────: .skin-pivot .dune-card, .skin-pivot .dune-card:hover, .skin-pivot .dune-card-decoration, .skin-pivot .dune-card-inner, .skin-pivot..."
 
mNo edit summary
Line 1: Line 1:
/* ─── Breadcrumb strip ─────────────────────────────── */
/*──────── Breadcrumb strip ───────*/
.dune-breadcrumb-nav { font-size:.9rem; margin:6px 0 14px 0; }
.dune-breadcrumb-nav{
.dune-breadcrumb-separator { margin:0 4px; color:var(--dune-gold); }
  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 (locked, video, image) ────────── */
/*──────── Card component ───────*/
.skin-pivot .dune-card,
.dune-card{
.skin-pivot .dune-card:hover,
  background:rgba(0,0,2,.7);color:#E0E0E0;padding:16px;margin:0 0 20px 0;
.skin-pivot .dune-card-decoration,
  border:1px solid #fce7c8;box-shadow:0 0 8px rgba(0,0,0,.5);}
.skin-pivot .dune-card-inner,
.dune-card-label{
.skin-pivot .dune-card-label,
  color:#b6a896;font-size:12px;text-transform:uppercase;margin-bottom:6px;
.skin-pivot .dune-card-title,
  border-bottom:1px solid #444;padding-bottom:4px;}
.skin-pivot .dune-card-description,
.dune-card-title{
.skin-pivot .dune-card-image,
  margin:0;font-size:20px;color:#fce7c8;text-transform:uppercase;
.skin-pivot .dune-card-image img,
  border-bottom:1px solid #fce7c8;padding-bottom:4px;margin-bottom:8px;display:flex;align-items:center;}
.skin-pivot .dune-card-locked,
.dune-card-title .icon{margin-right:8px;}
.skin-pivot .dune-card-locked-label,
.dune-card-description{
.skin-pivot .dune-card-locked-icon,
  font-size:16px;line-height:1.5;background:rgba(22,22,24,.4);
.skin-pivot .dune-card-locked-value,
  border:1px solid #444;border-radius:2px;padding:12px;margin-bottom:12px;}
.skin-pivot .dune-card-video {
.dune-card-image{text-align:center;margin:8px 0;}
   /* copy every rule block exactly as-is from Pivot.css */
.dune-card-image img{max-width:100%;height:auto;}
}
.has-border,.card-image-border{
   border:2px solid #fce7c8;border-radius:4px;background:#262626;padding:4px;}


/* ─── Utility borders for images ───────────────────── */
/* Locked-behind box */
.has-border,
.dune-card-locked{
.card-image-border { /* same rules */ }
  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;}


/* ─── Table wrappers & two-column / standard tables – */
/*──────── Tables ───────*/
.dune-table-wrapper,
.dune-table-wrapper{border:1px solid #444;border-radius:2px;overflow:hidden;width:100%;}
table.infobox-dune-two-column,
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-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 td{
  padding:9px 6px;font-size:15px;color:#E0E0E0;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,
table.infobox-dune-standard-table thead th{
table.infobox-dune-standard-table thead th,
  background:rgba(0,0,2,.7);color:#fce7c8;font-weight:600;text-transform:uppercase;letter-spacing:.05em;}
table.infobox-dune-standard-table th,
table.infobox-dune-two-column tr:last-child td,
table.infobox-dune-standard-table td,
table.infobox-dune-standard-table tr:last-child td{border-bottom:none;}
table.infobox-dune-standard-table tbody td,
.tr-dark{background:rgba(0,0,2,.7);color:#fce7c8;}
table.infobox-dune-standard-table tr.tr-dark th,
.tr-dark { /* keep all their rules */ }


/* ─── Icon colour align with Pivot gold ───────────── */
@media screen and (max-width:600px){
.skin-pivot .icon { color:var(--dune-gold); }
  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;}
}

Revision as of 01:22, 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);}
.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:100%;height:auto;}
.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-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;border-bottom:1px solid rgba(200,161,101,.3);}
table.infobox-dune-two-column thead th,
table.infobox-dune-standard-table thead th{
  background:rgba(0,0,2,.7);color:#fce7c8;font-weight:600;text-transform:uppercase;letter-spacing:.05em;}
table.infobox-dune-two-column tr:last-child td,
table.infobox-dune-standard-table tr:last-child td{border-bottom:none;}
.tr-dark{background:rgba(0,0,2,.7);color:#fce7c8;}

@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;}
}
Retrieved from "https://dunedb.com/index.php?title=Template:BuildingPage/styles.css&oldid=586"