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..." |
No edit summary |
||
| Line 1: | Line 1: | ||
/* NMC dark skin for OOO infobox */ | |||
.ooo-infobox { | .ooo-infobox { | ||
width: | width: 340px; | ||
border: 1px solid # | border: 1px solid #454545; | ||
border-collapse: separate; | border-collapse: separate; | ||
border-spacing: 0; | border-spacing: 0; | ||
background: # | background: #2a2a2a; /* dark card */ | ||
color: #eaeaea; | |||
font-size: 90%; | font-size: 90%; | ||
box-shadow: 0 | box-shadow: 0 2px 10px rgba(0,0,0,.25); | ||
border-radius: | border-radius: 12px; | ||
overflow: hidden; | overflow: hidden; | ||
} | } | ||
/* title bar */ | |||
.ooo-infobox .ooo-infobox__title { | .ooo-infobox .ooo-infobox__title { | ||
text-align: center; | text-align: center; | ||
font-weight: | font-weight: 800; | ||
font-size: | font-size: 112%; | ||
background: # | letter-spacing: .2px; | ||
padding: 10px; | background: #353535; /* your dark gray */ | ||
color: #cea141; /* your gold */ | |||
padding: 12px 10px; | |||
border-bottom: 1px solid #454545; | |||
} | } | ||
/* image area */ | |||
.ooo-infobox .ooo-infobox__image { | .ooo-infobox .ooo-infobox__image { | ||
text-align: center; | text-align: center; | ||
padding: | padding: 12px; | ||
background: # | background: #2f2f2f; | ||
} | } | ||
/* caption / description */ | |||
.ooo-infobox .ooo-infobox__caption { | .ooo-infobox .ooo-infobox__caption { | ||
text-align: center; | text-align: center; | ||
font-style: italic; | font-style: italic; | ||
color: # | color: #cfcfcf; | ||
padding: | padding: 8px 12px 12px; | ||
line-height: 1.35; | line-height: 1.35; | ||
background: #2f2f2f; | |||
border-bottom: 1px solid #3a3a3a; | |||
} | } | ||
.ooo-infobox | /* rows */ | ||
.ooo-infobox | .ooo-infobox th, | ||
.ooo-infobox td { | |||
padding: 9px 12px; | |||
vertical-align: top; | |||
} | } | ||
.ooo-infobox th { | .ooo-infobox th { | ||
width: | width: 46%; | ||
color: # | color: #e6e6e6; | ||
text-align: left; | text-align: left; | ||
font-weight: 600; | font-weight: 600; | ||
} | } | ||
/* subtle zebra striping */ | |||
.ooo-infobox tr:nth-child(even) td, | |||
.ooo-infobox tr:nth-child(even) th { | |||
background: rgba(255,255,255,0.03); | |||
} | |||
/* group headers */ | |||
.ooo-infobox__group th { | .ooo-infobox__group th { | ||
text-align: center; | text-align: center !important; | ||
font-weight: | font-weight: 800 !important; | ||
padding: | padding: 10px 12px !important; | ||
background: #303030 !important; | |||
color: #f0f0f0 !important; | |||
border-top: 1px solid #3a3a3a; | |||
border-bottom: 1px solid #3a3a3a; | |||
} | } | ||
/* small helper */ | |||
.ooo-infobox .ooo-infobox__muted { color: #bdbdbd; } | |||
/* link contrast inside the box */ | |||
.ooo-infobox a { color: #ffd27a; } | |||
.ooo-infobox a:hover { color: #ffeaac; } | |||
/* images should not overflow */ | |||
.ooo-infobox .ooo-infobox__image img { max-width: 100%; height: auto; } | |||