Out of Ore Wiki

Template:OOOInfoBox/styles.css: Difference between revisions

Created page with ".ooo-infobox { width: 320px; border: 1px solid #dcdcdc; border-collapse: separate; border-spacing: 0; background: #fff; font-size: 90%; box-shadow: 0 1px 3px rgba(0,0,0,.08); border-radius: 10px; overflow: hidden; } .ooo-infobox th, .ooo-infobox td { padding: 8px 10px; vertical-align: top; } .ooo-infobox .ooo-infobox__title { text-align: center; font-weight: 700; font-size: 110%; background: #f6f6f6; padding: 10px; } .ooo-infobox .ooo-i..."
 
mNo edit summary
 
(10 intermediate revisions by 2 users not shown)
Line 1: Line 1:
/* =========================================================
  OOO INFOBOX — Clean Industrial Style
  Matches OOO wiki design system
  ========================================================= */
.ooo-infobox {
.ooo-infobox {
   width: 320px;
   width: 300px;
  border: 1px solid #dcdcdc;
   border-collapse: collapse;
   border-collapse: separate;
   font-size: 0.92rem;
   border-spacing: 0;
 
   background: #fff;
   background: transparent;
   font-size: 90%;
   color: inherit;
   box-shadow: 0 1px 3px rgba(0,0,0,.08);
 
   border-radius: 10px;
   float: right;
   overflow: hidden;
   clear: right;
   margin: 0 0 1em 1em;
}
}


.ooo-infobox th,
/* ---------------------------------------------------------
.ooo-infobox td {
  TITLE
   padding: 8px 10px;
--------------------------------------------------------- */
   vertical-align: top;
 
.ooo-infobox__title {
  text-align: center;
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0.3px;
 
   padding-bottom: 10px;
  margin-bottom: 8px;
 
  color: var(--ooo-accent);
 
   border-bottom: 2px solid var(--ooo-border);
}
}


.ooo-infobox .ooo-infobox__title {
/* ---------------------------------------------------------
  IMAGE
--------------------------------------------------------- */
 
.ooo-infobox__image {
   text-align: center;
   text-align: center;
  font-weight: 700;
   padding: 8px 0 12px 0;
  font-size: 110%;
  background: #f6f6f6;
   padding: 10px;
}
}


.ooo-infobox .ooo-infobox__image {
.ooo-infobox__image img {
   text-align: center;
   max-width: 100%;
  padding: 10px;
   height: auto;
   background: #fafafa;
}
}


.ooo-infobox .ooo-infobox__caption {
/* ---------------------------------------------------------
  CAPTION
--------------------------------------------------------- */
 
.ooo-infobox__caption {
   text-align: center;
   text-align: center;
   font-style: italic;
   font-size: 0.85rem;
   color: #555;
   margin-bottom: 12px;
   padding: 6px 10px 10px;
   opacity: 0.8;
  line-height: 1.35;
}
}


.ooo-infobox tr:nth-child(even) td,
/* ---------------------------------------------------------
.ooo-infobox tr:nth-child(even) th {
  TABLE CELLS
   background: #fcfcfc;
--------------------------------------------------------- */
 
.ooo-infobox th,
.ooo-infobox td {
  padding: 6px 4px;
   vertical-align: top;
}
}


.ooo-infobox th {
.ooo-infobox th {
  width: 45%;
  color: #444;
   text-align: left;
   text-align: left;
   font-weight: 600;
   font-weight: 600;
  width: 48%;
  opacity: 0.9;
}
.ooo-infobox td {
  text-align: right;
}
}


/* ---------------------------------------------------------
  GROUP HEADERS
--------------------------------------------------------- */


.ooo-infobox__group {
  background: #f8f9fa;
}
.ooo-infobox__group th {
.ooo-infobox__group th {
   text-align: center;
   padding-top: 14px;
   font-weight: 700;
  padding-bottom: 4px;
   padding: 8px 10px;
 
  font-size: 0.85rem;
   font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
 
  color: var(--ooo-accent);
 
   border-bottom: 1px solid var(--ooo-border);
}
}
/* ---------------------------------------------------------
  MUTED TEXT
--------------------------------------------------------- */
.ooo-infobox__muted {
.ooo-infobox__muted {
   color: #666;
   opacity: 0.7;
   font-style: italic;
}
 
/* ---------------------------------------------------------
  ALIGNMENT OPTIONS
--------------------------------------------------------- */
 
.ooo-infobox--left {
  float: left;
  clear: left;
   margin: 0 1em 1em 0;
}
 
.ooo-infobox--none {
  float: none;
  margin: 0 0 1em 0;
}
 
.ooo-infobox--center {
  float: none;
  margin: 0 auto 1em;
}
 
/* ---------------------------------------------------------
  MOBILE
--------------------------------------------------------- */
 
@media (max-width: 640px) {
  .ooo-infobox,
  .ooo-infobox--left,
  .ooo-infobox--none,
  .ooo-infobox--center {
    float: none;
    width: 100%;
    margin: 0 0 1em 0;
  }
}
}
Retrieved from "https://wiki.outofore.com/index.php/Template:OOOInfoBox/styles.css"